【Web开发基础】JQuery中$.ajax使用

ajax传值

前端向后端传输数据，需要导入jQuery包

1、前端代码(字符串传递)

//js代码部分
//简单的实现字符串传递
<script>
    function test() {
		$.ajax({
            url: "http://localhost:8080/user/ajax",
            data: {
                "ajax": "123",
				"test": "666"
            },
            type: "post",
            dataType: "json"
            });
        }
</script>
//html代码部分
<button onclick="test()">test</button>

2、后端代码

//ajax测试
@PostMapping(value = "/ajax")
public void ajax(String ajax,String test) {
    System.out.println("测试" + ajax + "---" + test);
}

3、返回结果

//js代码部分
funaction dl(){
 $.ajax({
        url:"user/login",
        data: {
            userName : $("input[name='userName']").val(),
            userPass : $("input[name='userPass']").val()
        },
        type:"post",
        dataType:"html",
        async: false,
        success: function(data) {
            $("html").html(data)
        }
    })
}
//html部分
<input type="text" id="userName" name="userName" />
<input type="text" id="userPass" name="userPass" />
<input type="submit" onclick="dl()" value="登录">

后端代码

@PostMapping(value = "/login")
public String login(String userName,String userPass, Model model) {
    if(userName.equals("123456") && userPass.equals("666")) {
		return "ok";
	} else {
		return "no";
	}
}