ajax前台传值到后端 部分方式

1、对象（一个或多个对象转化成一个json字符串）

前端

​ contentType:“application/json”,：表示传过去的为 json字符串 类型，必须用post请求

$(function () {
        var dept={"id":1,"dName":"xiaoli"};
        var depts=[{"id":1,"dName":"xiaoli"},{"id":2,"dName":"xiaoli2"}];
        $.ajax({
            url:"${pageContext.request.contextPath}/tc/duoGeDuiXiang.do",
            type:"post",
            //contentType: "text/plain;charset=ISO-8859-1",
            //contentType: "application/x-www-form-urlencoded;charset=UTF-8",
            dataType:"text",
            contentType:"application/json",
            data:JSON.stringify(depts),     //js中 把一个或多个对象转化成一个json字符串
            success:function (info) {
                alert(info);
            },
            error:function () {
                alert("ajax响应失败");
            }

        })
    })

后台：

​ 若后台传多个对象，用list接收； 注意用注解@RequestBody(是从请求体拿到的数据，非url里面，所以前台需要用post请求)

//    多个或单个对象传到控制层，以json格式
    @RequestMapping("duoGeDuiXiangPage.do")
    public String demo2() {
        return "duoGeDuiXiang";
    }

    @RequestMapping(value = "duoGeDuiXiang.do", produces = "application/json;charset=utf-8")
    @ResponseBody
    public String duoGeDuiXiang(@RequestBody List<Deparment> depts) {
        System.out.println(depts);
        return "success!";
    }

2、数组

前端：

​ 注意：须加一个属性：traditional: true, 这样才能传数组

$(function () {
    var stu = ["小李", "小王", "小张"];
    $.ajax({
        url: "${pageContext.request.contextPath}/tc/arrayTest.do",
        type: "post",
        //contentType: "text/plain;charset=ISO-8859-1",
        //contentType: "application/x-www-form-urlencoded;charset=UTF-8",
        traditional: true,      //用于传过去的对象为数组
        dataType: "text",       //后端返回来的数据类型
        data: {stu: stu},
        success: function (info) {
            alert(info);
        },
        error: function () {
            alert("ajax响应失败");
        }

    })
})

后台：

//测试页面传数组到控制层
@RequestMapping("arrayPage.do")
public String demo1() {
    return "arrayPage";
}

@RequestMapping(value = "arrayTest.do", produces = "application/text;charset=utf-8")
@ResponseBody
public String arrayTest(String[] stu) {
    for (String s:stu){
        System.out.println(s);
    }
    return "success!";
}

3、表单序列化

前端：

​ 注意：每个input的name和对象的属性名对应

​ data:$(“form”).serialize(),

<form method="post" class="layui-form">
    <input  placeholder="用户名" type="text" name="personName"
            class="layui-input">
    <hr class="hr15">
    <input  placeholder="密码" type="password" name="personPassword"
            class="layui-input">
    <hr class="hr15">
    <input lay-submit lay-filter="login" style="width: 100%;"
           type="button" value="登录" οnclick="login()" />
    <hr class="hr20">
    <div class="layui-form-item">
        <div class="layui-form-item" pane="">

            <input type="checkbox" lay-filter="filter"  id="memoryuser" lay-skin="primary" title="30天内自动登录" >

        </div>
    </div>
</form>

<script>
    //进行登录处理
    function login() {
        $.ajax({
            type:"post",
            url:"${pageContext.request.contextPath}/pc/checkLogin.do",
            dataType:"text",
            data:$("form").serialize(),
            success:function (info) {
                alert(info)
                if(info=="success"){
                    layer.msg("登录成功", {icon: 1});
                }else{
                    layer.msg('账号或者密码错误！', {icon: 2});
                }
            },
            error:function () {
                layer.msg('ajax请求失败', {icon: 2});
            }
        })
    }
</script>

后台

@Controller
@RequestMapping("pc")
public class PersonController {

    @Autowired
    private PersonService personService;

    @RequestMapping(value = "checkLogin.do")
    @ResponseBody
    public String checkLogin(Person person){
        System.out.println("-------------person----------"+person);
        String info = personService.checkLogin(person);
        System.out.println("---------info-----------"+info);
        return info;
    }
}

ajax跨域访问

后台 这里举的传数组的例子

//ajax跨域访问
@RequestMapping(value = "crossDomain.do", produces = "application/text;charset=utf-8")
@ResponseBody
public String crossDomain(HttpServletResponse resp,String [] stu){
    //允许所有域名访问该资源
    resp.setHeader("Access-Control-Allow-Origin","*");
    /*resp.setHeader("Access-Control-Allow-Methods", "POST, GET, OPTIONS, DELETE");
    resp.setHeader("Access-Control-Max-Age", "3600");*/
    resp.setHeader("Access-Control-Allow-Headers", "x-requested-with,Authorization");
    /*  resp.setHeader("Access-Control-Allow-Credentials","true");*/

    for (String s:stu){
        System.out.println(s);
    }

    return "success";
}

前端

​ 注意ajax里面的 url 得根据项目路径改

<!doctype html>