AJAX详解

Question

我发现了很多 AJAX 的例子，我想我可以用它得到一些代码来自己工作。如果我知道 AJAX 代码的所有术语的用途在哪里就好了。

我认为总的来说，它缺乏这些指南或特殊页面的可用性，其中为新程序员详细解释了构建的代码。

这将有很大帮助，因为在很多情况下都会对语法产生误解。例如，我在实习中每天花 8 个小时从头开始学习 PHP、Jquery、HTML，那里有很多信息，但它们不是结构化的，而且在大多数情况下都是技术性的。关于那个玛比有什么建议吗？ :)

$.ajax({
type: 'POST',
url: 'http://kyleschaeffer.com/feed/',
data: { postVar1: 'theValue1', postVar2: 'theValue2' },
beforeSend:function(){
// this is where we append a loading image
$('#ajax-panel').html('<div class="loading"><img src="/images/loading.gif" alt="Loading..." /></div>');
},
success:function(data){
// successful request; do something with the data
$('#ajax-panel').empty();
$(data).find('item').each(function(i){
  $('#ajax-panel').append('<h4>' + $(this).find('title').text() + '</h4><p>' + $(this).find('link').text() + '</p>');
});
},
error:function(){
// failed request; give feedback to user
$('#ajax-panel').html('<p class="error"><strong>Oops!</strong> Try that again in a few moments.</p>');
}
});

Answer 1

Ajax 是异步的，这意味着您可以使用它从服务器获取新信息，而无需重新加载整个页面。

这是您的代码的解释：

$.ajax({

$ 是 JQuery 对象，您将在其上调用 ajax 函数

type: 'POST',

您将通过邮寄方式发送数据，这意味着您必须使用 $_POST['variable_name'] 在 php 中获取它们。你也可以用 GET 代替

url: 'http://kyleschaeffer.com/feed/',

您要访问的网址

data: { postVar1: 'theValue1', postVar2: 'theValue2' },

当您使用 POST 发送请求时，您无法直接从 URL 传递数据。 所以你必须像这样通过它们。 { nameVar: '值', .... } 如果您使用 GET 发送，您可以直接将它们写入 url，例如：“http://my_url.php?var1=val1&var2=val2 等...

beforeSend:function()

您可以在发送 ajax 请求之前定义一个操作

$('#ajax-panel').html('<div class="loading"><img src="/images/loading.gif" alt="Loading..." /></div>');

在这里，您要在 div“ajax-panel”内写入一些内容。 （一个div“正在加载”和“正在加载”内的图片）。

success:function(data)

如果您的请求成功，您就可以做某事。成功意味着如果服务器回答 200 我猜，无论如何......如果你有来自服务器的响应......;）

$('#ajax-panel').empty();

您将内容删除到ajax面板中

$(data).find('item').each(function(i){
  $('#ajax-panel').append('<h4>' + $(this).find('title').text() + '</h4><p>' + $(this).find('link').text() + '</p>');
});

您要在 ajax-panel div 之后（附加）添加一些 html

error:function()

不确定您是否在寻找该内容，希望对您有所帮助；）

Answer 2

AJAX

是异步

JavaScript

和

XML

的缩写，这项技术帮助我们从服务器加载数据，而无需刷新浏览器页面。

如果您是

AJAX

的新手，我建议您先阅读我们的

Ajax

教程，然后再继续。

JQuery

是一个很棒的工具，它提供了一组丰富的

AJAX

方法来开发下一代Web应用程序

看看这个

$.ajax({
        type        : varType, //GET or POST or PUT or DELETE verb
        url         : varUrl, // Location of the service
        data        : varData, //Data sent to server
        contentType : varContentType, // content type sent to server
        dataType    : varDataType, //Expected data format from server
        processdata : varProcessData, //True or False
        success     : function(msg) {//On Successfull service call

        },
        error       : function() {// When Service call fails
                }
    });