ajax与后端互相传值与处理各种类型

JAY.LIN 收录于 Ajax

2023-02-25 约 2001 字预计阅读 4 分钟

https://bing.ee123.net/img/rand?artid=123639442

ajax与后端互相传值与处理(各种类型)

提示：这里可以添加系列文章的所有文章的目录，目录需要自己手动添加

提示：写完文章后，目录可以自动生成，如何生成可参考右边的帮助文档

文章目录

前言

提示：这里可以添加本文要记录的大概内容：

ajax 全名为 async javascript and XML

是前后台交互数据的重要工具

它可以局部刷新页面而不需要刷新整个页面

那么怎么实现ajax与后台之间的数据传输以及得到数据后怎样处理尤为重要

提示：以下是本篇文章正文内容，下面案例可供参考

一、ajax的基本操作(入门)

前端

点击按钮执行loadDoc()函数

 <button type="button" onclick="loadDoc()">更改文本</button>

这是 loadDoc()函数

function loadDoc() {
  var xhttp = new XMLHttpRequest();//创建XMLHttpRequest对象,即创建一个异步调用对象.
  xhttp.send("GET", "url", true);//创建一个新的HTTP请求.
  //参数含义依次为 请求方式,请求地址, true/false(同步异步),用户名称(可写),密码(可写) 
  xhttp.open();//将请求发送到服务器用于GET请求
  xhttp.onreadystatechange = function() {//当readyState属性发生变化时被调用的函数
    if (this.readyState == 4 && this.status == 200) {
    //status:返回请求的状态号 200为"ok"
    //readyState:保存XMLHttpRequest的状态。 4为请求已完成且响应已就绪
     var s= xhttp.responseText()//得到后端返回的字符串
     alert(s);
    }
  };
} 

后端(java)

 @RequestMapping("/url")//这里的url 要与上面的保持一致
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        resp.setContentType("text/json;charset=UTF-8);//中文
        resp.getWriter().write("请求成功");//发送 字符串给前端
    }

结果

这是ajax入门基本操作,即ajax用来进行前后端交互

二、jquery版的ajax(用jquery来写ajax,在以后传递跟复杂的参数时,更方便),这里展示最常用的写法

$.ajax({//与js类似,
			   type: "POST",//请求类型
			    dataType: "text",//可写为json 之后会写到
			    url: "url",//请求地址
			    data: ""//需发送到服务器的数据
				success: function(data){
				      alert(date);
				//成功相应执行的函数
					},
				error: function(msg){
				          alert(msg);
				  //失败
				  }
				});

json

JSON，全称是 JavaScript Object Notation,译为JavaScript对象标记法。

通俗的来讲json可以在字符串与对象之间相互转换,方便了前后端数据交互转化与使用.

传入参数(一个)

传入一个参数相对简单

这是js的ajax

  xhttp.open("GET","http://localhost:8080/s1?id=1",true);//只是
  //在后面加了  ?id=1

jq的ajax

   data: {id: 1},//在data后面加,其余不变(也可以像js一样直接在url上加)

传入一个对象

这个时候再使用原生js就很难实现了

我们使用jq

比如我们要把user的四个属性传入后端

 var s=  {"name":"张三","sex":"男","id":1,"money":1};//这是我们要传的值

             这是ajax的几个参数
                    type: "POST",
                    url: "url",
                    data: JSON.stringify(s),//将s转为json格式
                    dateType: "json",表示从后端接收的时json格式
                    async: false,
                    contentType: "application/json;charset=utf-8",//表示传到后端的时json格式,并且支持中文

后端接收

@RequestMapping(method = {RequestMethod.POST}, value = "/s3", produces = "application/json;charset=UTF-8")
    @ResponseBody
    //可以用RequestBody 将user封装
    public String toPay1(@RequestBody User users) {
        System.out.println(users);
        return "okk";
    }

结果

传入一个对象集合

与上边同理,只不过要先把每一个json放入一个数组中,再将数组json化即可

前端

 var s=  {"name":"张三","sex":"男","id":1,"money":1};
          var s1=  {"name":"李四","sex":"女","id":2,"money":3};
          var a=new Array();
          a.push(s);
          a.push(s1);
          var json=JSON.stringify(a);
            $.ajax({
                    type: "POST",
                    url: "http://localhost:8080/s3",
                    data: json,
                    dateType: "json",
                    async: false,
                    contentType: "application/json;charset=utf-8",

后端只需要把接收的类型改为对象集合即可

@RequestBody List<User> users

结果

一个数组或集合再加一个参数

我是这样做的

前端

同时传入json,并在url加参数

   url: "http://localhost:8080/s3?id=1",
    data: json,

后端接受

@RequestBody List<User> users,String id

结果

提示：这里对文章进行总结：