Einfaches jQuery-Beispiel für den Betrieb von JSON-Daten basierend auf Ajax-js-Tutorial-php.cn

Einfaches jQuery-Beispiel für den Betrieb von JSON-Daten basierend auf Ajax

高洛峰

Freigeben： 2017-01-12 09:32:00

Original

1203 Leute haben es durchsucht

Das Beispiel in diesem Artikel beschreibt, wie jQuery JSON-Daten basierend auf Ajax verarbeitet. Teilen Sie es wie folgt mit allen als Referenz:

jQuery Ajax-Beispieldemonstration

Die drei Formate von jQuery Ajax können bei der Interaktion mit den Hintergrunddaten entweder das JSON-Format oder das XML-Format sein Wir empfehlen, die Daten in das JSON-Format zu konvertieren.

Vergleich von XML und JSON

1. Lesbarkeit

Eine Seite ist die empfohlene Syntax und die andere Seite ist ein standardisiertes In-Tag Format, es ist schwer, den Gewinner zu sagen.

2. Skalierbarkeit

XML ist von Natur aus sehr skalierbar, und JSON hat sie mit Sicherheit. Es gibt nichts, was XML nicht erweitern kann, was JSON nicht kann.

3. Codierungsschwierigkeiten

XML verfügt über eine Fülle von Codierungstools wie Dom4j, JDom usw. JSON verfügt auch über Tools, die von json.org bereitgestellt werden, aber die JSON-Codierung ist offensichtlich viel einfacher XML kann auch mit Hilfe von Tools geschrieben werden, auch wenn es sich nicht um JSON-Code handelt, es ist jedoch nicht einfach, XML gut zu schreiben.

4. Die Dekodierungsschwierigkeit

Bei der XML-Analyse müssen die untergeordneten und übergeordneten Knoten berücksichtigt werden, was den Leuten schwindelig macht, während die Analyseschwierigkeit von JSON fast 0 ist. XML verliert an dieser Stelle wirklich nichts.

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

Nach dem Login kopieren

PHP-Datei 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);
  }
}
?>

Nach dem Login kopieren

Ich hoffe, dass dieser Artikel für alle in der jQuery-Programmierung hilfreich sein wird.

Weitere einfache jQuery-Beispiele für den Betrieb von JSON-Daten auf Ajax-Basis finden Sie auf der chinesischen PHP-Website!