AJAX详细解释 [英] AJAX explained in detail

问题描述

我找到了一些AJAX示例的分配，我想我可以得到一些代码来独立工作.如果我只知道所有使用AJAX代码的条款在哪里.

I found allot of examples of AJAX and I think I can get some code with it to work on my own. If only I knew what the use of all the terms of the AJAX code where.

我认为，总体而言，它缺少这些指南或特殊页面的内容，在这些页面中没有为新程序员详细解释构造的代码.

I think in general it lacks the availability of these guides or special pages where constructed code is explained in detail for new programmers.

由于在许多情况下对语法的误解，这将极大地帮助您.例如，我每天花8个小时在实习中，从头开始学习PHP，Jquery，HTML，那里有很多信息，但是信息不是结构化的，在大多数情况下是技术性的.关于那个黑猩猩有什么建议吗?:)

This would help enormously because of the misunderstanding of the syntax in many cases. Me for example spend 8 hours a day on my internship to learn PHP, Jquery, HTML from scratch and there is allot of information out there but its not structured and in most cases to technical. Any tips on that 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>');
}
});

推荐答案

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

Ajax is asynchronous, which mean you can use it to get new informations from the server without reloading the whole page.

以下是您的代码的说明:

Here's an explanation of your code :

$.ajax({

$是要在其上调用ajax函数的JQuery对象

$ is the JQuery object, on which you're calling the ajax function

type: 'POST',

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

You're gonna send your data by post, which mean that you'll have to get them in php with $_POST['variable_name']. You could also put GET instead

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

您要访问的网址

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

使用POST发送请求时，无法直接从URL传递数据.因此，您必须像这样通过它们.{nameVar:'value'，....}如果使用GET发送，则可以将其直接写入url中，例如:" http://my_url.php?var1 = val1&; var2 = val2 等...

as you're sending your request with POST, you cannot pass data directly from the URL. So you have to pass them like that. { nameVar: 'value', .... } If you were sending with GET, you could directly write them into url like : "http://my_url.php?var1=val1&var2=val2 etc ...

beforeSend:function()

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

You can define an action before sending your ajax request

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

在这里，您要在div"ajax-panel"内编写一些内容.(div为正在加载"，图片为正在加载").

Here, inside your div "ajax-panel" you want to write some content. (a div "loading" and a picture inside "loading").

success:function(data)

如果请求成功，则可以执行某些操作.成功意味着服务器无论如何都会回答200，如果您收到服务器的响应...;)

If your request is successful, you can do something. By successful it means if server answer 200 i guess, anyway ... If you have a response from server... ;)

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

您将内容删除到ajax面板中

You delete content into ajax-panel

$(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

You're adding some html AFTER (append) the ajax-panel div

error:function()

不确定您是否正在寻找它，希望对您有所帮助；)

Not sure you were looking for that, hope that help you ;)

这篇关于AJAX详细解释的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！