php中使用ajax进行前后端json数据交互

(最近在学习ajax,所以想自己总结一下在PHP中如何使用ajax技术!)

一、ajax注意点:

  1、原理图:(来自韩顺平ajax视频)

    

    2、ajax返回数据类型:

      文本,json,xml

     (1)文本格式:

        

     (2)xml:

        

1 <?php
2     //告诉浏览器返回的是xml类型
3      header("Content-Type:text/xml;charset=utf-8");
4
5
6
7
8 ?>

      

      前端如何取出:

        xmlrequest.responseXml();//返回的是对象

      (3)json:

      json只是一种文本字符串,他是存储在responseText属性中。

二、实现(通过添加图书案例来实现,由于题目主要是用json来传输,所以我选择json格式传输,但这个案例用json实在是太勉强了):

  1、使用javascript来实现:

    前端注册界面:

      当点击提交按钮时,会触发addbook函数。

1 <form >
2         书名:<input id="bookname" type="text"><br>
3         价格:<input id="price" type="text"><br>
4         所属类别:<input id="leibie" type="text"><br>
5         <input type="submit" value="提交" onclick="addbook()">
6         <input type="reset" value="重置">
7     </form>

   2、js代码:

    

 1 class Book{
 2     constructor(bookname,price,leibie){
 3         this.bookname=bookname;
 4         this.price=price;
 5         this.leibie=leibie;
 6     }
 7
 8
 9 }
10 function addbook() {
11     var bookname=$(‘#bookname‘).val();
12     var price=$(‘#price‘).val();
13     var leibie=$(‘#leibie‘).val();
14     if(bookname===‘‘ || price===‘‘ || leibie===‘‘){
15         alert("输入不能为空");
16     }
17     var book=new Book(bookname,price,leibie);
18     //在这里,将book对象转换成json类型字符串
19     var bookjson=JSON.stringify(book);
20     // alert(bookjson);
21     // console.log(bookjson);
22     //使用jquery创建ajax对象
23     var xml=$.ajax({
24         //定义提交的方式
25         type: "POST",
26         //定义要提交的URL
27         url:‘addbook.php‘,
28         //定义提交的数据类型
29         dataType:‘json‘,
30         async:false,
31         //要传递的数据
32         data:{‘book‘:bookjson},
33         //服务器处理成功后传送回来的json格式的数据
34         success:function (ans) {
35             alert(JSON.parse(ans));
36         }
37     } );
38 }

    3、PHP处理数据:

    

 1 <?php
 2 /**
 3  * Created by PhpStorm.
 4  * User: monty
 5  * Date: 2018/10/29
 6  * Time: 11:58
 7  */
 8     $book=$_POST[‘book‘];
 9     //通过将json字符串解析为json对象数据
10     $bookjson=(array)json_decode($book);
11     $conn[email protected]mysqli_connect(‘localhost‘,‘root‘,‘root‘,‘test‘) or die("获取数据库连接失败!");
12     mysqli_query($conn,"set names ‘utf8‘");
13     $sql="insert into book(bookname,price,leibie) VALUES (‘{$bookjson["bookname"]}‘,‘{$bookjson["price"]}‘,‘{$bookjson["leibie"]}‘)";
14     @mysqli_query($conn,$sql);
15     //将返回数据转码为json字符串
16     $res=json_encode({"res":"success"});
17     echo $res;
18 ?>

原文地址:https://www.cnblogs.com/yangsongwei/p/9871986.html

时间: 2024-09-28 19:58:08

php中使用ajax进行前后端json数据交互的相关文章

基于Ajax技术的前后端Json数据交互方式实现

前言 使用浏览器访问网站是日常生活中必不可少的一件事情,当我们在浏览器地址栏中输入网址后会看到网站的内容,那么这个过程中发生了什么?下面简单介绍下浏览器访问网站过程. 第一步:浏览器向DNS服务器发起DNS请求,DNS服务器解析域名后返回域名对应的网站服务器IP地址第二步:浏览器获取IP地址后向网络服务器发送一个HTTP请求第三步:网络服务器解析浏览器的请求后从数据库获取资源,将生成的html文件封装至HTTP 响应包中,返回至浏览器解析 下图抓包显示了访问"www.baidu.com"

原生js使用ajax进行简单的前后端的数据交互|js&amp;node&amp;ajax

第一次发布内容,内容简陋请多包含....... 前端html代码: <html> <head> <meta charset="UTF-8"> <title>AJAX 实例</title> <script src="http://libs.baidu.com/jquery/2.0.0/jquery.js"></script> <script> var data="

SpringMVC中出现&quot; 400 Bad Request &quot;错误(用@ResponseBody处理ajax传过来的json数据转成bean)的解决方法

最近angularjs post到后台 400一头雾水 没有任何错误. 最后发现好文,感谢作者 SpringMVC中出现" 400 Bad Request "错误(用@ResponseBody处理ajax传过来的json数据转成bean)的解决方法 今天开发过程中,在SpringMVC中的Action中处理前台ajax请求传过来的json数据直接转成对应的实体类时出错:400 Bad Request,后台也不报错,400指的的是请求无效(请求有语法问题或者不能满足请求),调试了好长时间

ASP.NET MVC 4 中的JSON数据交互

前台Ajax请求很多时候需要从后台获取JSON格式数据,一般有以下方式: 拼接字符串 return Content("{\"id\":\"1\",\"name\":\"A\"}"); 为了严格符合Json数据格式,对双引号进行了转义. 使用JavaScriptSerialize.Serialize()方法将对象序列化为JSON格式的字符串 MSDN 例如我们有一个匿名对象: var tempObj=new

AJAX跨域请求json数据的实现方法

这篇文章介绍了AJAX跨域请求json数据的实现方法,有需要的朋友可以参考一下 我们都知道,AJAX的一大限制是不允许跨域请求. 不过通过使用JSONP来实现.JSONP是一种通过脚本标记注入的方式,它是可以引用跨域URL的js脚本,不过需要提供一个回调函数(必须在您自己的页面上),因此,你可以自己处理结果. 让我们看看JSONP的是怎么在jQuery,MooTools的,Dojo Toolkit中实现的. jQuery的JSONPjQuery.getJSON方法:Js代码 jQuery.get

通过Ajax进行Post提交Json数据的方法

下面pk10平台出租就为大家分享一篇qq:185 198 884通过Ajax进行Post提交Json数据的方法,具有很好的参考价值,希望对大家有所帮助.一起跟随ws平台出租过来看看吧js代码:1 $.ajax({2 type : "POST", 3 url: js_path + "/maintainAdd/add", 4 data : JSON.stringify(madd_data.editMaintain), 5 contentType : "appl

【Spring学习笔记-MVC-5】利用spring MVC框架,实现ajax异步请求以及json数据的返回

作者:ssslinppp      时间:2015年5月26日 15:32:51 1. 摘要 本文讲解如何利用spring MVC框架,实现ajax异步请求以及json数据的返回. Spring MVC与json参考文章:[spring学习笔记-mvc-3]返回json数据-方式1  和 [spring学习笔记-mvc-4]返回json数据-方式2. 使用到的技术主要如下: Ajax:使用JQuery 提供的ajax:==>需要引入jquery.min.js文件: Spring MVC: Jso

SpringMVC - JSON数据交互

Json(JavaScript Object Notation),它是一种轻量级数据交换格式,格式简单,易于读写,目前使用特别广泛. 两种交互模式 ① 请求json.输出json,要求请求的是json串,所以在前端页面中需要将请求的内容转成json,不太方便.② 请求key/value.输出json.此方法比较常用. @RequestBody 与 @ResponseBody ● @RequestBody:接收用户传入json串转成pojo 用于读取http请求的内容(字符串),通过Springm

springMVC学习(11)-json数据交互和RESTful支持

一.json数据交互: json数据格式在接口调用中.html页面中较常用,json格式比较简单,解析还比较方便. 比如:webservice接口,传输json数据. springMVC进行json交互 1)环境准备: 加载json转换的jar包: springmvc中使用jackson的包进行json转换(@requestBody和@responseBody使用下边的包进行json转) jackson-core-asl-1.9.11.jar jackson-mapper-asl-1.9.11.