Jquery通过ajax发送json类型参数

最新推荐文章于 2024-04-10 12:08:26 发布

littleshimmer

最新推荐文章于 2024-04-10 12:08:26 发布

阅读量6.9k

点赞数 4

分类专栏： jquery JavaScript

本文链接：https://blog.csdn.net/qq_43521551/article/details/106741331

版权

JavaScript 同时被 2 个专栏收录

5 篇文章 0 订阅

订阅专栏

jquery

2 篇文章 0 订阅

订阅专栏

Jquery通过ajax发送json类型参数

概述

ajax请求通常使用jquery的方法$.ajax实现，需要导入jquery依赖的包，jquery包可访问jquery官网下载，也可以通过引用网络上的资源
ajax请求通常使用json作为数据传输类型，通过javascript内置函数解析json字符串，也可以将对象直接量格式化为json对象
json数据类型后端处理，可以使用gson包支持，例如现在用的gson-2.8.5.jar，根据github上谷歌的介绍，可通过Maven存储库下载

内容摘要

创建json对象的形式
json对象与json字符串转化
Jquery发送JSON类型参数
案例源码

具体内容

1. 创建json对象的形式

形式1

obj = {};
obj.name = "测试用户";
var msg =  "ajax发送的参数";
obj.msg = msg;

形式2

var info = "其他形式";
obj = {name:"测试用户",msg:"ajax发送的消息",info:info};

形式3

obj = {}
obj["name"] = "测试用户";
obj["msg"] = "ajax发送的参数";

2. json对象与json字符串转化

//json对象格式化为json字符串
var ss = JSON.stringify(obj);

//json字符串解析为json对象
var p = JSON.parse(ss);

Jquery发送JSON类型参数

发送的数据类型：dataType:"json"，则传入参数data:obj中的obj是json对象，而不是json字符串
返回结果处理：success: function(data)得到的data是json对象，而不是json字符串
后端如果没有正确返回json格式的字符串，则会报如下错误，说明返回类型错误

{"readyState":4,"responseText":"success","status":200,"statusText":"parsererror"}
json字符串的表示与解析

单个字符串的json表示

var ss = "\"一条消息\"";
alert(JSON.parse(ss));

多个字符串表示

var ss = "{\"result\":\"处理成功\",\"tip\":\"返回的消息\"}";
alert(JSON.parse(ss).result);

简单数组与json转换

var arr = [1,2,3,5];
// 格式化为json字符串类型
var obj = JSON.stringify(arr);
				
var astr = "[1,2,3,4,5]";
// 解析为数组类型
alert(JSON.parse(astr)[0]);

复杂数组与json转换

var ss = "[{\"result\":\"结果1\",\"tip\":\"消息1\"},{\"result\":\"结果2\",\"tip\":\"消息2\"}]";
var arr = JSON.parse(ss);
var res = "";
for(var k=0;k<arr.length;k++){
	res +=arr[k].result+"\t"+arr[k].tip;
}
document.write(res);

4.案例源码

4.1 前端源码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		 <script src="https://code.jquery.com/jquery-3.5.0.min.js"></script>
		<script>
			//js代码ajax请求
			function test(){
				// obj = {};
				// obj.name = "测试用户";
				// obj.msg = "ajax发送的参数";
				
				var msg = "ajax发送的消息";
				obj = {name:"测试用户",msg:msg};
				// obj = {}
				// obj["name"] = "测试用户";
				// obj["msg"] = "ajax发送的参数";
				$.ajax({
					url: "http://127.0.0.1:8080/JqueryTest/helloservlet",
					data:obj,
					type: "GET",
					dataType: "json",
					// false为同步，true为异步，默认为false
					// 对于success返回，设置为false或true，似乎看不出影响
					async: false,
					// xhrFields不设置将则后端服务器不会保存session会话
					xhrFields: {
						withCredentials: true
					},
					// 跨域请求访问,不设置则在浏览器中无法访问服务器
					crossDomain: true,
					// 错误处理函数最好加上，否则将很难排错
					error:function(msg){
					/* 
						msg为json对象，返回以下字符串：
						{"readyState":4,"responseText":"success","status":200,"statusText":"parsererror"}
						说明后端服务器没有正确返回json数据类型
					*/
						document.write(JSON.stringify(msg));
						
					},
					success: function(data) {
						// data为json对象
						document.getElementById("content").innerText=JSON.stringify(data);
					}
				});
			}
			window.onload = function(){
				test();
			}
		</script>
	</head>
	<body>
		显示结果：
		<div id="content"></div>
	</body>
</html>

4.2 后端源码

package servlet;

import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import com.google.gson.Gson;
import com.google.gson.JsonObject;

@WebServlet("/helloservlet")
public class HelloServlet extends HttpServlet {
	private static final long serialVersionUID = 1L;

	public HelloServlet() {
		super();
		// TODO Auto-generated constructor stub
	}

	protected void doGet(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		// TODO Auto-generated method stub
		//response.setHeader函数：
		//		1.用于设置请求头，控制访问
		//		2.不设置将会出现跨域请求访问不到的问题
		//		3.最简便的办法是是直接在过滤其中设置
//		response.setHeader("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
		response.setHeader("Access-Control-Allow-Headers","*");
		response.setHeader("Access-Control-Allow-Method","*");
//		允许所有的域名跨域访问
//		response.setHeader("Access-Control-Allow-Origin","*");
		response.setHeader("Access-Control-Allow-Origin", request.getHeader("Origin"));
		response.setHeader("Access-Control-Allow-Credentials", "true");
		
//		request获取采参数如出现乱码，则需要设置
//		request.setCharacterEncoding("utf-8");
		
//		response需要设置编码，否则会返回乱码
//		response.setCharacterEncoding("utf-8");
		response.setContentType("text/html;charset=UTF-8");


		String name = request.getParameter("name");
		String msg = request.getParameter("msg");
		System.out.println("传递参数："+name+"\t"+msg);
		PrintWriter out = response.getWriter();
		
//		这里需要jar包支持：gson-2.8.5.jar
//		用该函数可转换将其他数据类型为json字符串类型，这样可以
		JsonObject json = new JsonObject();
		json.addProperty("result","处理成功");
		json.addProperty("tip", "返回的消息");
		
		out.print(json.toString());


//		json字符串类型,如果只是一个元素：
//		out.print("\"success\"");
		out.flush();
		out.close();
	}

	protected void doPost(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		// TODO Auto-generated method stub
		doGet(request, response);
	}
}

littleshimmer

关注

4
点赞
踩
18

收藏

觉得还不错? 一键收藏
1
评论
Jquery通过ajax发送json类型参数

jquery发送ajax请求//js代码ajax请求function sendimgtest(){ //确保已经下载并导入了该文件：  obj = {}; obj.message = "ajax发送的参数"; $.ajax({ url: "http://127.0.0.1:8080/MyProject/ohello", data:null, type: "GET", dat
复制链接

扫一扫