AJAX详细解释

Question

我找到了很多AJAX的例子,我想我可以用它来获取一些代码来自己工作.如果只知道使用AJAX代码的所有术语在哪里.

我认为一般来说,缺乏这些指南或特殊页面的可用性,其中为新程序员详细解释了构造代码.

由于在许多情况下对语法的误解,这将极大地帮助.例如,我在实习期间每天花8小时从头开始学习PHP,Jquery,HTML,并且有大量的信息,但它没有结构化,在大多数情况下是技术性的.关于那个maby的任何提示？:)

$.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:'value',....}如果您使用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>');
});

你正在添加一些html AFTER(追加)ajax-panel div

error:function()

不确定你是否在寻找,希望能帮到你;)