Heim > Artikel > Web-Frontend > Einfaches jQuery-Beispiel für den Betrieb von JSON-Daten basierend auf Ajax

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

高洛峰Original: 2017-01-12 09:32:001184Durchsuche

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>

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

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!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：So implementieren Sie die Paging-Anzeige mit Jquery+Ajax+Json. Im Anhang finden Sie JAVA+JQuery zur Implementierung von asynchronem Paging.Nächster Artikel：So implementieren Sie die Paging-Anzeige mit Jquery+Ajax+Json. Im Anhang finden Sie JAVA+JQuery zur Implementierung von asynchronem Paging.

In Verbindung stehende Artikel

Mehr sehen