ホームページ > 記事 > ウェブフロントエンド > ajax に基づいて json データを操作する jQuery の簡単な例

ajax に基づいて json データを操作する jQuery の簡単な例

高洛峰オリジナル: 2017-01-12 09:32:001144ブラウズ

この記事の例では、jQuery が ajax に基づいて json データを操作する方法を説明します。参考のために皆さんと共有してください。詳細は次のとおりです:

jQuery Ajax のサンプルデモ

jQuery Ajax の 3 つの形式は、バックグラウンドデータを操作するときに、json 形式または xml 形式でデータを変換することをお勧めします。 json形式に変換します。

Xmlとjsonの比較

1.可読性

JSONとXMLの可読性は、推奨される構文と標準化されたタグ形式を区別するのが困難です。

2. スケーラビリティ

XML は当然ながら非常にスケーラブルであり、JSON で拡張できないものは XML にはありません。

3. コーディングの難しさ

XML には Dom4j、JDom などの豊富なエンコーディングツールがあります。JSON にも json.org が提供するツールがありますが、JSON エンコーディングは明らかに XML を使用しない場合でも記述できます。コードの助けは必要ですが、XML をうまく書くのは簡単ではありません。

4. デコードの難易度

XML の解析では子ノードと親ノードを考慮する必要があるため、目がくらみますが、JSON の解析難易度はほぼ 0 です。この時点では、XML が失うものは何もありません。

<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 ファイル 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);
  }
}
?>

この記事が jQuery プログラミングの皆様のお役に立てれば幸いです。

ajax に基づいて json データを操作する jQuery の簡単な例については、PHP 中国語 Web サイトに注目してください。

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

前の記事：Jquery+Ajax+Jsonを使ったページング表示の実装方法非同期ページングを実装するJAVA+JQueryを添付します。次の記事：Jquery+Ajax+Jsonを使ったページング表示の実装方法非同期ページングを実装するJAVA+JQueryを添付します。

続きを見る

ajax に基づいて json データを操作する jQuery の簡単な例

関連記事