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

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

结果
在这里插入图片描述

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

  • 6
    点赞
  • 12
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 3
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

还不错的派大星

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值