A simple example of php using jquery's ajax technology to transfer json data, jqueryjson

A simple example of php using jquery's ajax technology to transfer json data, jqueryjson_PHP tutorial

WBOY

Release： 2016-07-12 08:54:14

Original

940 people have browsed it

php uses jquery's ajax technology to transmit json data in a simple example. jqueryjson

This article describes the simple implementation method of php based on jquery's ajax technology to transmit json data. Share it with everyone for your reference, the details are as follows:

html page:

<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<script type="text/javascript" src="jquery-1.8.2.min.js"></script>
<script type="text/javascript">
 $(function(){
   $("#send").click(function(){
    var cont = $("input").serialize();
    $.ajax({
      url:'ab.php',
      type:'post',
      dataType:'json',
      data:cont,
      success:function(data){
       var str = data.username + data.age + data.job;
       $("#result").html(str);
    }
  });
 });
 });
</script>
</head>
<body>
<div id="result">一会看显示结果</div>
<form id="my" action="" method="post">
 <p><span>姓名：</span> <input type="text" name="username" /></p>
 <p><span>年龄：</span><input type="text" name="age" /></p>
 <p><span>工作：</span><input type="text" name="job" /></p>
</form>
<button id="send">提交</button>
</body>
</html>

Copy after login

php page:

<&#63;php
header("Content-type:text/html;charset=utf-8");
    $username = $_POST['username'];
    $age = $_POST['age'];
    $job = $_POST['job'];
    $json_arr = array("username"=>$username,"age"=>$age,"job"=>$job);
    $json_obj = json_encode($json_arr);
    echo $json_obj;
&#63;>

Copy after login

Use post method

<script type="text/javascript">
 $(function(){
 $("#send").click(function(){
   var cont = {username:$("input")[0].value,age:$("input")[1].value,job:$("input")[2].value};
   var url = 'ab.php';
   $.post(url,cont,function(data){
    var res = eval("(" + data + ")");//转为Object对象
   var str = res.username + res.age + res.job;
  $("#result").html(str);
  });
 });
 });
</script>

Copy after login

Readers who are interested in more PHP-related content can check out the special topics on this site: "Summary of PHP ajax skills and applications", "Summary of PHP operations and operator usage", "Summary of PHP network programming skills", "PHP basic syntax" "Introductory Tutorial", "Summary of PHP Office Document Skills (Including Word, Excel, Access, PPT)", "Summary of PHP Date and Time Usage", "Introduction to PHP Object-Oriented Programming", "php String Usage" Summary", "Introduction Tutorial on PHP MySQL Database Operation" and "Summary of Common PHP Database Operation Skills"

I hope this article will be helpful to everyone in PHP programming.

Articles you may be interested in:

jQuery sends a request to the PHP server through Ajax and returns JSON data
PHP combines Jquery and ajax to implement waterfall flow effects
php jQuery Ajax method to achieve the like effect (with source code download)
jQuery Ajax PHP to implement the "like" rating function with source code download
Jquery and php combined to implement AJAX long polling (LongPoll)
jQuery Ajax PHP "Like" rating function implementation code
jQuery Ajax PHP Mysql implementation of paging display data example explanation
PHP jQuery Ajax Mysql how to implement the mood expression function
PHP jQuery Ajax implements user login and logout
PHP jQuery Ajax implements multi-image upload effect
PHP jquery ajax implements instant chat function example
jquery php Ajax displays the upload progress of multiple image uploads and generates thumbnail code
jQuery PHP ajax implements the function of loading more content lists on Weibo