Ajax를 기반으로 json 데이터를 조작하는 jQuery의 간단한 예-JS 튜토리얼-php.cn

Ajax를 기반으로 json 데이터를 조작하는 jQuery의 간단한 예

高洛峰

풀어 주다： 2017-01-12 09:32:00

원래의

1203명이 탐색했습니다.

이 기사의 예에서는 jQuery가 ajax를 기반으로 json 데이터를 작동하는 방법을 설명합니다. 다음과 같이 참조용으로 모든 사람과 공유하세요.

jQuery Ajax 예제 데모

jQuery Ajax의 세 가지 형식은 백그라운드 데이터와 상호 작용할 때 json 형식 또는 xml 형식일 수 있습니다. 데이터를 json 형식으로 변환하는 것이 좋습니다.

Xml과 json의 비교

1. 가독성

JSON과 XML의 가독성은 한쪽은 권장 구문이고 다른 쪽은 표준화되어 있습니다. 형식에서는 승자를 말하기가 어렵습니다.

2. 확장성

XML은 확장성이 매우 뛰어나며 JSON이 확장할 수 있는 것은 없습니다.

3. 코딩 난이도

XML에는 Dom4j, JDom 등과 같은 풍부한 인코딩 도구가 있습니다. JSON에도 json.org에서 제공하는 도구가 있지만 JSON 인코딩은 분명히 훨씬 쉽습니다. XML은 JSON 코드가 아니더라도 도구를 사용하여 작성할 수 있지만 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 중국어 웹사이트를 주목하세요!