jquery ajax交互_使用这些带有Ajax片段的jQuery轻松在服务器和客户端之间进行交互...

cuke3186

于 2020-08-05 09:45:06 发布

阅读量117

点赞数

文章标签： ajax php js python java ViewUI

原文链接：https://www.script-tutorials.com/easily-interact-between-server-and-client-using-these-jquery-with-ajax-snippets/

版权

jquery ajax交互

Ajax with jQuery – several interactive samples Ajax – this is group of technologies using in web development to create interactive applications. Ajax is client-server technology which allow to web page to retrieve data asynchronously from server without reloading page. All this allow to achieve really nice and good results. jQuery library will help us greatly with it. All just because it have all methods to work with Ajax. Here are samples and downloadable package:

带有jQuery的Ajax –几个交互式示例 Ajax –这是在Web开发中用于创建交互式应用程序的一组技术。 Ajax是一种客户端-服务器技术，它允许网页从服务器异步检索数据而无需重新加载页面。所有这些都可以达到非常好的效果。 jQuery库将极大地帮助我们。仅仅是因为它具有使用Ajax的所有方法。以下是示例和可下载的软件包：

现场演示

[sociallocker]

[社交储物柜]

打包下载

[/sociallocker]

[/ sociallocker]

Firstly lets check syntax of calling ajax method

首先让我们检查调用ajax方法的语法

This is or $.ajax or jQuery.ajax of course. Used params can be different:

当然是$ .ajax或jQuery.ajax 。使用的参数可以不同：

$.ajax(Map properties) or $.ajax(String url [, Map properties])

$ .ajax(地图属性)或$ .ajax(字符串url [，地图属性])

Second param set was added in version 1.5 of jQuery.

第二个参数集是在jQuery 1.5版中添加的。

url – Requested page URL address.

url –请求的页面URL地址。

properties – Array of properties for your request.

properties-您的请求的属性数组。

Commonly, array of properties very big, you can about all of them here

通常，属性数组非常大，您可以在此处找到所有这些属性

I will tell you just about most useful params

我将告诉您最有用的参数

success (function) – this function will called when the request succeeds. The function passing us 1-3 params (depends on used version of library). But first param is always returned data from server. We will using it.

成功(函数) –请求成功时将调用此函数。向我们传递1-3个参数的函数(取决于使用的库版本)。但是第一个参数始终是服务器返回的数据。我们将使用它。

data (object/string) – your custom data which will passed to requested page.

数据(对象/字符串) –您的自定义数据，该数据将传递到请求的页面。

dataType (string) – possible values: xml, json, script, or html. This describing which data type we expecting from server response.

dataType(字符串) –可能的值：xml，json，脚本或html。这描述了我们期望服务器响应的数据类型。

type (string) – request type. possible values GET or POST. By default – GET.

类型(字符串) –请求类型。可能的值GET或POST。默认情况下– GET。

url (string) – Url address to request.

url(字符串) –要请求的网址。

因此，让我们开始创建样本！ (So, lets start creating our samples !)

示例1 –最简单的示例：仅检索一些文本信息。 (sample 1 – most easy sample: is just retrieving of some text information.)

$.ajax({
  url: 'response.php?action=sample1',
  success: function(data) {
    $('.results').html(data);
  }
});

$.ajax({
  url: 'response.php?action=sample1',
  success: function(data) {
    $('.results').html(data);
  }
});

I created that .results DIV to accept our responses.

我创建了.results DIV来接受我们的回复。



   
   
    
    awaiting for response



   
   
    
    awaiting for response

What did server? – easy – just return text value:

服务器是什么？ –简单–仅返回文本值：

echo 'Sample 1 - success';

echo 'Sample 1 - success';

示例2 –我们将自定义值发送到我们PHP脚本 (sample 2 – we will send custom values to our PHP script)

$.ajax({
  type: 'POST',
  url: 'response.php?action=sample2',
  data: 'name=Andrew&nickname=Aramis',
  success: function(data){
    $('.results').html(data);
  }
});

$.ajax({
  type: 'POST',
  url: 'response.php?action=sample2',
  data: 'name=Andrew&nickname=Aramis',
  success: function(data){
    $('.results').html(data);
  }
});

What did our server? – just return text value – with printed income variables:

我们的服务器是什么？ –仅返回文本值–具有打印的收入变量：

echo 'Sample 2 - success, name = ' . $_POST['name'] . ', nickname= ' . $_POST['nickname'];

echo 'Sample 2 - success, name = ' . $_POST['name'] . ', nickname= ' . $_POST['nickname'];

示例3 –我们将使用dataType = script。 (sample 3 – we will use dataType = script.)

$.ajax({
  dataType: 'script',
  url: 'response.php?action=sample3',
})

$.ajax({
  dataType: 'script',
  url: 'response.php?action=sample3',
})

As you see, we doing nothing on success here, instead this we will able to do it at server side:

如您所见，我们在这里不做任何成功的事情，相反，我们将能够在服务器端做到这一点：

echo "$('.results').html('Sample 3 - javascript evaluating');";

echo "$('.results').html('Sample 3 - javascript evaluating');";

示例4 –我们将使用dataType = xml。这对于使用外部XML很有用，例如RSS feed (sample 4 – we will use dataType = xml. This is useful to work with external XML, as example RSS feeds)

$.ajax({
  dataType: 'xml',
  url: 'response.php?action=sample4',
  success: function(xmldata){
    $('.results').html('');
    $(xmldata).find('item').each(function(){
        $('

$.ajax({
  dataType: 'xml',
  url: 'response.php?action=sample4',
  success: function(xmldata){
    $('.results').html('');
    $(xmldata).find('item').each(function(){
        $('

Our XML provider just should return XML to us:

我们的XML提供程序只应将XML返回给我们：

header ('Content-Type: application/xml; charset=UTF-8');
echo <<
Item 1
Item 2
Item 3
Item 4
Item 5
XML;

header ('Content-Type: application/xml; charset=UTF-8');
echo <<
Item 1
Item 2
Item 3
Item 4
Item 5
XML;

示例5 –我们将使用dataType = json。这也很有趣，因为我们将能够使用收入参数作为接收对象的属性 (sample 5 – we will use dataType = json. This is interesting too, just because we will able to use income params as attributes of received object)

$.ajax({
  dataType: 'json',
  url: 'response.php?action=sample5',
  success: function(jsondata){
    $('.results').html('Name = ' + jsondata.name + ', Nickname = ' + jsondata.nickname);
  }
});

$.ajax({
  dataType: 'json',
  url: 'response.php?action=sample5',
  success: function(jsondata){
    $('.results').html('Name = ' + jsondata.name + ', Nickname = ' + jsondata.nickname);
  }
});

Our XML provider just should return XML to us:

我们的XML提供程序只应将XML返回给我们：

$aRes = array('name' => 'Andrew', 'nickname' => 'Aramis');
require_once('Services_JSON.php');
$oJson = new Services_JSON();
echo $oJson->encode($aRes);

$aRes = array('name' => 'Andrew', 'nickname' => 'Aramis');
require_once('Services_JSON.php');
$oJson = new Services_JSON();
echo $oJson->encode($aRes);