recherche

Maison  >  Article  >  interface Web  >  Exemple simple de jQuery exploitant des données JSON basées sur Ajax

Exemple simple de jQuery exploitant des données JSON basées sur Ajax

高洛峰
高洛峰original
2017-01-12 09:32:001199parcourir

L'exemple de cet article décrit comment jQuery exploite les données json basées sur ajax. Partagez-le avec tout le monde pour votre référence, comme suit :

Exemple de démonstration de jQuery Ajax

Les trois formats de jQuery Ajax peuvent être au format json ou au format xml lors de l'interaction avec les données d'arrière-plan. recommande de convertir les données au format json.

Comparaison de Xml et json

1. Lisibilité

La lisibilité de JSON et XML est comparable. Un côté est une syntaxe recommandée et l'autre côté est une balise In standardisée. format, il est difficile de dire qui sera le gagnant.

2. Évolutivité

XML est naturellement très évolutif, et JSON l'a certainement. Il n'y a rien que XML puisse étendre que JSON ne puisse pas.

3. Difficulté de codage

XML dispose d'une multitude d'outils de codage, tels que Dom4j, JDom, etc. JSON dispose également d'outils fournis par json.org, mais le codage JSON est évidemment beaucoup plus simple que XML, même s'il ne s'agit pas de code JSON, peut également être écrit à l'aide d'outils, mais il n'est pas facile de bien écrire du XML.

4. Difficulté de décodage

L'analyse XML doit prendre en compte les nœuds enfants et les nœuds parents, ce qui donne le vertige, alors que la difficulté d'analyse de JSON est proche de 0. XML ne perd vraiment rien à ce stade. 

<html>
<head>
<title>jQuery Ajax 实例演示</title>
</head>
<script language="javascript" src="../lib/jquery.js"></script>
<script language="javascript">
$(document).ready(function ()
{
  $(&#39;#send_ajax&#39;).click(function (){
   var params=$(&#39;input&#39;).serialize(); //序列化表单的值
   $.ajax({
    url:&#39;ajax_json.php&#39;, //后台处理程序
    type:&#39;post&#39;,     //数据发送方式
    dataType:&#39;json&#39;,   //接受数据格式
    data:params,     //要传递的数据
    success:update_page //回传函数(这里是函数名)
   });
  });
//$.post()方式：
$(&#39;#test_post&#39;).click(function (){
  $.post(
   &#39;ajax_json.php&#39;,
   {
    username:$(&#39;#input1&#39;).val(),
    age:$(&#39;#input2&#39;).val(),
    sex:$(&#39;#input3&#39;).val(),
    job:$(&#39;#input4&#39;).val()
   },
   function (data) //回传函数
   {
    var myjson=&#39;&#39;;
    eval(&#39;myjson=&#39; + data + &#39;;&#39;);
    $(&#39;#result&#39;).html("姓名:" + myjson.username + "<br/>工作:" + myjson[&#39;job&#39;]);
   }
  );
  });
//$.get()方式：
$(&#39;#test_get&#39;).click(function ()
 &#39;ajax_json.php&#39;,
   {
    username:$("#input1").val(),
    age:$("#input2").val(),
    sex:$("#input3").val(),
    job:$("#input4").val()
   },
   function(data) //回传函数
   {
    var myjson=&#39;&#39;;
    eval("myjson=" + data + ";");
    $("#result").html(myjson.job);
   }
  );
});
});
function update_page (json) //回传函数实体，参数为XMLhttpRequest.responseText
{
var str="姓名:"+json.username+"<br />";
str+="年龄:"+json.age+"<br />";
str+="性别:"+json.sex+"<br />";
str+="工作:"+json.job+"<br />";
str+="追加测试:"+json.append;
$("#result").html(str);
}
</script>
<body>
<div id="result" style="background:orange;border:1px solid red;width:300px;height:200px;"></div>
<form id="formtest" action="" method="post">
  <p><span>输入姓名:</span><input type="text" name="username" id="input1" /></p>
  <p><span>输入年龄:</span><input type="text" name="age" id="input2" /></p>
  <p><span>输入性别:</span><input type="text" name="sex" id="input3" /></p>
  <p><span>输入工作:</span><input type="text" name="job" id="input4" /></p>
</form>
<button id="send_ajax">提交</button>
<button id="test_post">POST提交</button>
<button id="test_get">GET提交</button>
</body>
</html>

Fichier PHP ajax_json.php : 

<?php
//$arr = $_POST; //若以$.get()方式发送数据，则要改成$_GET.或者干脆:$_REQUEST
$arr = $_REQUEST;
$arr[&#39;append&#39;] = &#39;测试字符串&#39;;
//print_r($arr);
$myjson = my_json_encode($arr);
echo $myjson;
function my_json_encode($phparr)
{
  if(function_exists("json_encode"))
  {
   return json_encode($phparr);
  }
  else
  {
   require_once &#39;json/json.class.php&#39;;
   $json = new Services_JSON;
   return $json->encode($phparr);
  }
}
?>

J'espère que cet article sera utile à tous ceux qui programment jQuery.

Pour plus d'exemples simples jQuery d'exploitation de données json basées sur ajax et des articles connexes, veuillez faire attention au site Web PHP chinois !

Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：Comment implémenter l'affichage de la pagination à l'aide de Jquery Ajax Json attaché à JAVA JQuery pour implémenter la pagination asynchroneArticle suivant：Comment implémenter l'affichage de la pagination à l'aide de Jquery Ajax Json attaché à JAVA JQuery pour implémenter la pagination asynchrone

Articles Liés

Voir plus