关于我们

质量为本、客户为根、勇于拼搏、务实创新

< 返回新闻公共列表

Ajax请求中data与后端的交互有哪几种方法

发布时间:2020-08-08 10:10:50

前言

Ajax提交数据非常的方便,可以把整个表单化为一个json体往后台传递。但是很多时候,我们并不希望用整个表单的数据,或者不希望使用整个表单。

有表单的前端页面

第一类例子是有表单的提交方式,假设名字叫做page1.jsp。

<script src="../js/jquery-3.3.1.min.js"></script><script type="text/javascript" src="./../js/my.ajax.sample.js"></script><form id="my_form" >
        <input id="t1" name="t1_nm" type="text"/>
        <input id="t2" name="t1_nm" type="text"/>
        <input id="btn1" type="button" name="submit" value="submit"> </form>1234567

然后要有一个controller类控制。

@Controller@RequestMapping("/ajax")public class AjaxController { /***/ }123

Ajax请求

以下的ajax方法是写在my.ajax.sample.js文件中的内容,当然要使用ajax方法,必须要jQuery引入。如果发现外部js文件不可用,参考【SpringBoot开发小记】里面写的如何引用外部js文件。为了写起来方便,笔者这里全部用POST写了,其实GET,POST,DELETE等等这些方法是根据需求来的,大家自己按需求选择就好了。

第一种

Ajax:数据里放在URL里作为参数传递:

$(document).on("click","#btn1",function(){
    $.ajax({
        url: rootPath+"/ajax/s1?t1_nm="+$("#t1").val()+"&t2_nm="+$("#t2").val(),
        type: "POST", 
        success: function(result){
            alert(result);
        }
    });});123456789

Controller:接收。RequestParam("t1_nm")这里面的命名最好和URL里的参数一致。

@RequestMapping(value = "/s1", method = RequestMethod.POST) @ResponseBodypublic String s1(@RequestParam("t1_nm") String t1, @RequestParam("t2_nm") String t2) {
    System.out.println("t1:"+t1+",t2:"+t2);
    return "success";}123456

第二种

Ajax:数据包装成一个JSON格式的数据传递。

$(document).on("click","#btn1",function(){
    var data ={
        "t1_nm": $("#t1").val(),
        "t2_nm": $("#t2").val()
    };
    console.log(data);
    $.ajax({
        url: rootPath+"/ajax/s2",
        type: "POST",
        contentType:'application/json',
        data:JSON.stringify(data),
        dataType: "json",
        success: function(result){
            alert(result);
        }
    });});1234567891011121314151617

Controller:接收。这个Map<String, Object> map就是接收到的json值。@RequestBody注解就是用来接收json格式的。

@RequestMapping(value = "/s2", method = RequestMethod.POST)@ResponseBodypublic String s2(@RequestBody Map<String, Object> map) {
    System.out.println(map.toString());
    return "success";}123456

第三种

Ajax:直接包装一个form表单内容为json格式传递。

$(document).on("click","#btn1",function(){
    let data = $("#form_text").serialize();
    console.log(data);
    $.ajax({
        url: rootPath+"/ajax/s3",
        type: "POST",
        data:data,
        success: function(result){
            alert(result);
        }
    });});123456789101112

这里我们要玩点高级玩意儿了,我们先构造一个存放表单数据的类,也就是实体类。这里其名字叫做AjaxModel。但是这个类的属性,必须和jsp里面的控件的name属性值一样,否则无法取到值。

public class AjaxModel {
	//对应<input id="t1" name="t1_nm" type="text"/> 注意name="t1_nm"
    private String t1_nm;   
    //对应<input id="t2" name="t1_nm" type="text"/> 注意name="t2_nm"
    private String t2_nm;
    public AjaxModel() {
    }
    public AjaxModel(String t1_nm, String t2_nm) {
        this.t1_nm = t1_nm;
        this.t2_nm = t2_nm;
    }
    public String getT1_nm() {
        return t1_nm;
    }
    public void setT1_nm(String t1_nm) {
        this.t1_nm = t1_nm;
    }
    public String getT2_nm() {
        return t2_nm;
    }
    public void setT2_nm(String t2_nm) {
        this.t2_nm = t2_nm;
    }
    @Override
    public String toString() {
        return "AjaxModel{" +
                "t1_nm='" + t1_nm + '\'' +
                ", t2_nm='" + t2_nm + '\'' +
                '}';
    }}12345678910111213141516171819202122232425262728293031

Controller:接收。这样接收的数据直接就把ajaxModel给初始化过了,接到就可以用。

    @RequestMapping(value = "/s3", method = RequestMethod.POST)
    @ResponseBody
    public String s3(AjaxModel ajaxModel) {
        System.out.println(ajaxModel.toString());
        return "success";
    }123456

第四种

Ajax:数据在data处拼接,然后发起请求到后台。

$(document).on("click","#btn1",function(){
    alert($("#t1").val());
    $.ajax({
        url: rootPath+"/ajax/s4",
        data:"t1_nm="+$('#t1').val()+"&t2_nm="+$('#t2').val(),
        type: "POST", 
        dataType: "json",
        success: function(result){
            alert(result);
        }
    });});123456789101112

Controller:接收。这里的参数可以直接换成AjaxModel ajaxModel,也可以直接构造model类。

@RequestMapping(value = "/s4", method = RequestMethod.POST) @ResponseBodypublic String s4(@RequestParam("t1_nm") String t1, @RequestParam("t2_nm") String t2) {
    System.out.println("t1:"+t1+",t2:"+t2);
    return "success";}123456

第五种

Ajax:直接写在URL里,作为另一种形式的参数

$(document).on("click","#btn1",function(){
    $.ajax({
        url: rootPath+"/ajax/s5/"+$('#t1').val(),
        type: "POST", 
        dataType: "json",
        success: function(result){
            alert(result);
        }
    });});12345678910

Controller:接收。这里的参数可以直接换成AjaxModel ajaxModel,也可以直接构造model类。

@RequestMapping(value = "/s5/{t1_nm}", method = RequestMethod.POST) @ResponseBodypublic String s5(@PathVariable String t1_nm) {
    System.out.println("t1:"+t1_nm);
    return "success";}



相关阅读

云备份有哪些主要优点?初步认识什么是云备份?大数据采集与数据采集有什么区别?数据采集的定义是什么?云存储技术之集群存储云存储的相关性能要求关于“云”的相关基础认识云主机与虚拟主机有什么区别?IDC机房监控设备服务标准IDC机房服务维护内容IDC基本业务产品常识服务器的访问的速度由哪些因素决定?《手机卡顿 - 办法新招》关于服务器托管有些什么功能?服务器托管应该注意哪些事项?服务器的托管有哪些优势?服务器租用和服务器托管的相关基础知识三级分销中薪金报酬计划之矩阵制的缺陷三级分销商城搭建时需要掌握的技术Hadoop主要有下面几个优点云计算的数据组织结构云计算的部署模型关于块存储的特性及其优缺点面向对象存储(OOS)的特点及适合应用的类型云计算的三种类型云计算中文件系统操作和namespace的关系关于云计算的优势对于Namenode和Datanode的划分关于Hadoop HDFS的设计思想关于云服务的优缺点云服务的特点及其市场价值云计算的主要特征云服务的好处有哪些?什么是对象存储对象?云存储有哪些特点?云存储系统所具有的几大优势云数据库具有一些什么特性?关于云服务器的特点有哪些?云服务器的架构体系及其优势云南RTK网络应用常见的问题及解决办法关于前端开发的优化问题阿里云域名转入失败常见问题及处理方法关于云计算的概念计算机网络技术基础知识云计算的优点和缺点服务器搭建计算机网络安全常见的危险因素有哪些?什么是内容分发网络(CDN)?云南服务器搭建和数据备份,恢复云南云服务器的三大作用人工智能AI初认识云计算服务的6个优势云南服务器托管有哪些注意事项Tomcat的特点云计算的三个优点选取小程序服务商时的注意事项不同数据库的不同区别什么是VPS主机它的优势是什么?你知道5G的优点和缺点吗?云南三级分销商城开发的目的和对企业的价值云南网站优化的3个方面和网页的优化我们晋级拉!!!云南网站链接维护的具体方法云南网站应该如何做优化云南网站维护的主要内容云南云服务器和虚拟主机的操作区别云服务器部署和注意点云南服务网器托管应该选择怎样的机房云南虚拟建设网站主机的优点和缺点云服务器和物理服务器的区别云服务器有哪些优势C# List用法 List介绍C#和Java有什么不同PHP的优点和缺点智慧新餐饮和传统餐饮的区别云数据库对比传统数据库有哪些优点裸金属服务器是什么它的作用是什么白盒测试的特点js中添加scriptjs中[]、{}、()的用法和区别php 字符串的整型转换ipa如何安装到苹果手机邓白氏码是什么?iOS开发者账号到期续费教程在C#中有哪些引用类型和值类型小程序搭建时需要准备些什么云数据库对比传统数据库的优势什么样的企业适合SEMjs中的常见错误C#数据类型转换字符串与数值之间的转换C#的几种循环遍历方式物联网是什么它和互联网又有什么区别?云南网站建设时应该注意些什么云计算是什么?它能干些什么?展望未来5G会给我们的生活带来哪些影响C#常见的几种报错类别C#的学习流程有哪些dedecms 绑定二级域名的正确方法SEM是什么它和SEO之间是什么关系?云南新餐饮料模式是如何运行的?云南网站建设初期应该注意哪些问题
/template/Home/Zkeys/PC/Static