ajax请求之json约定

最新推荐文章于 2023-02-09 12:57:17 发布
最新推荐文章于 2023-02-09 12:57:17 发布
阅读量148 收藏
点赞数
分类专栏： phpstuday--Ajax（http://www.php.cn/c AJAX
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43706224/article/details/86573032
版权

前后端json标记约定

{
	“success": true, 请求是否成功
	"errormsg" : "xxx ", success为false的时候返回信息
	"data" : "xxx",  返回的数据
}

客户端处理json字符串代码优化

<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>
<script type="text/javascript">
	document.getElementById('search').onclick=function () {
		// 发送Ajax查询请求并处理
		var request = new XMLHttpRequest();
		request.open("GET","service.php?number="+document.getElementById('keyword').value)
		request.send();
		request.onreadyState =function () {
			if (request.readychangeState === 4) {
				if (request.status === 200) {
					var data = JSON.parse(request.responseText);
					if (data.success) {
						document.getElementById("searchResult").innerHTML = data.msg;
					}else{
						document.getElementById("searchResult").innerHTML = 
						"出现错误:" + data.msg;
					}
					document.getElementById("searchResult").innerHTML = request.responseText;
				}else{
					alert("发生错误：" + request.status);
				}
			}
		}
	}
	document.getElementById('save').onclick=function () {
		// 发送Ajax查询请求并处理
		var request = new XMLHttpRequest();
		request.open("POST","service.php");
		var data = "name=" + document.getElementById("staffName").value
		"&number=" + document.getElementById("staffNumber").value
		"&sex=" + document.getElementById("staffSex").value
		"&job=" + document.getElementById("staffJob").value
		request.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
		request.send(data);
		request.onreadyState =function () {
			if (request.readychangeState === 4) {
				if (request.status === 200) {
					var data = JSON.parse(request.responseText);
					if (data.success) {
						document.getElementById("createResult").innerHTML = data.msg;
					}else{
						document.getElementById("createResult").innerHTML = 
						"出现错误:" + data.msg;
					}
					document.getElementById("createResult").innerHTML = request.responseText;
				}else{
					alert("发生错误：" + request.status);
				}
			}
		}
	}
</script>
</body>
</html>

通常我们不用原生的js写页面，而是用js库，比如jquery
在这里插入图片描述

http：//apps.bdimg.com/libs/jquery/1.11.1/jquery.js这是一个在线的jquery资源库

jQuery改造ajax

<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>
<script type="text/javascript" src="http：//apps.bdimg.com/libs/jquery/1.11.1/jquery.js">
	$(document).ready(function () {
		$("#search").click(function () {
			$ajax({
				type: "GET",
				url:"service.php?number=" + $("#keyword").val(),
				dataType:"json",
				success:function (data) {
					if (data.success) {
						$("#searchResult").html(data,msg);
					}else{
						$("#searchResult").html("出现错误:"+ data.msg);
					}
				},
				error:function (jqXHR) {
					alert("发生错误："+ jqXHR.status);
				}
			});
		});
		$("#save").click(function () {
			$ajax({
				type: "POST",
				url:"service.php",
				dataType:"json",
				data{
					name:$("#staffName").val(),
					number:$("#staffNumber").val(),
					sex:$("#staffsex").val(),
					job:$("#staffjob").val(),
				},
				success:function (data) {
					if (data.success) {
						$("#createResult").html(data,msg);
					}else{
						$("#createResult").html("出现错误:"+ data.msg);
					}
				},
				error:function (jqXHR) {
					alert("发生错误："+ jqXHR.status);
				}
			});
	});
</script>
</body>
</html>
空零kl
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JSON命名约定[关闭]
微信-sjk6070
03-14 489
JSON命名是否有标准？ 我看到大多数使用由下划线（lower_case）分隔的小写的示例。 但是，你可以使用PascalCase或camelCase吗？ #1楼 在本文档中， Google JSON样式指南 （在Google上构建JSON API的建议）， 它建议： 属性名称必须是camelCased ，ASCII字符串。 第一个字符必须是字母，下划线（_）或美元符号（$）。 例： { “thi...
Ajax 使用& Json
莱克博尔德的博客
04-12 1275
一、ajax 1. Ajax 简介 A JAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。 A JAX 是与服务器交换数据并更新部分网页的艺术，在不重新加载整个页面的情况下。 1.2 Ajax所包含的技术 ajax并非一种新的技术，而是几种原有技术的结合体。它由下列技术组合而成。 1.使用CSS和XHTML来表示。 2.使用DOM模型来交互和动态显示。 3.使用XMLHttpRequest来和服务器进行异步通信。 4.使
AJAX&JSON
baiduwenku112的博客
10-12 183
## 今日内容 1. AJAX： 2. JSON # AJAX： 1. 概念： ASynchronous JavaScript And XML 异步的JavaScript 和 XML 异步和同步：客户端和服务器端相互通信的基础上 * (同步)客户端必须等待服务器端的响应。在等待的期间客户端不能做其他操作。 * （异步）客户端不需要等待服务器端的响应。在服务器处理请求的过程中，客户端可以进行其他的操作。 ...
Ajax使用JSON数据格式
shiyeqiangldh的专栏
06-30 913
1： •JSON（JavaScriptObject  Notation）一种简单的数据格式，比xml更轻巧。JSON是JavaScript原生格式，这意味着在JavaScript中处理JSON数据不需要任何特殊的API或工具包。 •JSON的规则很简单：对象是一个无序的“‘名称/值’对”集合。一个对象以“{”（左括号）开始，“}”（右括号）结束。每个“名称”后跟一个“:”（冒号）；“‘名称/值
JSON协议
行走夕阳夜色凉
07-13 2390
JSON 指的是 JavaScript 对象表示法（JavaScript Object Notation） – JSON 独立于语言和平台，需要导6个包 JSON只有两种结构：对象和数组, 由这两种结构嵌套和组合来表示各式各样的数据。 •数据对象由一系列的属性/值对来表示 •数据对象和属性/值对由逗号分隔 •花括号保存对象 •方括号保存数组 JSON 值可以是 数字（整...
使用GSON和泛型解析约定格式的JSON串
chuntuanba1171的博客
10-26 120
直接上代码 package gson; /** * Created by xuhe on 2016/10/26. */ public class CommonJson<T> { /** * 是否成功 */ private Boolean s...
json和jsonp的使用格式
StarLOVELeaf的博客
01-22 1万+
最近一直在看关于json和jsonp的区别和各自的用法、优缺点！  下面是我看到过解释最清楚的一片文章   说到AJAX就会不可避免的面临两个问题，第一个是AJAX以何种格式来交换数据？第二个是跨域的需求如何解决？这两个问题目前都有不同的解决方案，比如数据可以用自定义字符串或者用XML来描述，跨域可以通过服务器端代理来解决。 但到目前为止最被推崇或者说首选的方案还是用JSON来传
ajax的post请求数据为json格式相关设置
个人笔记
02-09 2396
平时用request封装axios习惯了突然用ajax传参时一直出问题，原来是配置设置错了。
ajax与json
梦想是很难很难的，所以先勇敢一点
04-19 1112
当json数据的value为null时，转换成对象，获取该对象的value，使用==与null（null是代表空，不是字符串）比较，结果为false;在Java对象转换JSON对象时，get开头的所有方法会被转换。它把对象转换成json串的方式，把所有的属性包括为null的全部输出；尤其是日期，你输入一个yyyy-MM-dd类型日期，它会输出，日历类型，一年中的哪个月，一个月的哪天等等，总之不是我想要的。
1. AJAX： 2. JSON
羽扬 -- YYDCYY
09-16 327
内容 1. AJAX： 2. JSON AJAX： 1. 概念： ASynchronous JavaScript And XML 异步的JavaScript 和 XML 1. 异步和同步：客户端和服务器端相互通信的基础上 * 客户端必须等待服务器端的响应。在等待的期间客户端不能做其他操作。 * 客户端不需要等待服务器端的响应。在服务器处理请求的过程中，客户端可以进行其他的操作。 ...
ajax使用 ajax+json
桃子疯狂_博客
11-08 3万+
首先将ajax写于js方法中,定义事件,让元素触发,触发之后就会有数据产生给服务端 $.ajax({ type: "POST", url: "test.php", data: "name=garfield&amp;age=18", success: function(dat...
使用GSON和泛型解析约定格式的JSON串(转)
不正经的大叔
03-12 300
https://www.cnblogs.com/qq78292959/p/3781808.html
前端Ajax传递Json数据，后端处理两种方式
Architect_CSDN的博客
04-14 1万+
前端Ajax传递Json数据，后端处理两种方式 在这里只讨论在前端通过Ajax远程传输Json数据的，不讨论通过form的形式传递数据 第一种方式： 　　前端传递过来的数据刚好和我们的bean实体对象属性一致，则可以使用对象的形式接受。 前端写法： 　$().ready(function(){ var obj = JSON.stringify({'userNo':'121...
JSON标准格式
创新艺术效率
01-23 6万+
标准JSON的合法符号：{(左大括号)  }(右大括号)  "(双引号)  :(冒号)  ,(逗号)  [(左中括号)  ](右中括号) JSON字符串：特殊字符可在字符前面加 \ 或使用 \u 加 4位16进制数来处理 {"name":"jobs"} JSON布尔：必须小写的true和false {"bool":true} JSON空：必须小写的null {"object":null
$.ajax()方法从服务器获取json数据几种方式详解
热门推荐
Sun9528的博客
06-10 7万+
对$.ajax()方法从服务器获取json数据的几种方式进行详解
RFC4627中文版-JSON格式定义
weixin_33826609的博客
06-25 1352
2019独角兽企业重金招聘Python工程师标准>>> ...
AJAX设置content-type为：application/json提交参数后台接收参数的问题
zhuwei_clark的博客
11-14 6万+
我一直做java的，对前端说不上有多了解，以前遇到的前端的开发人员，包括我自己再写ajax的时候基本上都是以下写法： $('#send').click(function(){ $.ajax({ headers:{ Authorization : "Bearer eyJhbGciOiJSUzI1NiIsInR5cCIgOiAiSldUIiwia2lkIiA6IC...
$.ajax添加请求头
最新发布
05-01
$.ajax可以通过设置headers属性来添加请求头。例如： ``` $.ajax({ url: 'https://example.com', method: 'GET', headers: { 'Authorization': 'Bearer token', 'Content-Type': 'application/json' }, success: function(response) { console.log(response); }, error: function(error) { console.log(error); } }); ``` 在上面的示例中，我们通过设置headers属性来添加Authorization和Content-Type请求头。注意，在设置请求头时，需要遵守特定的命名约定和格式要求。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值