jQuery的 $.ajax() 相比较js的原生 XMLHttpRequest 要好用和方便很多。
一个小Demo,用$.ajax() 写一个登录。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/jquery-3.1.1.min.js"></script>
<!--<script>-->
<!--$("#login").click(function () {-->
<!--$.get("101.200.56.5:8080/Interest/login.action"-->
<!--,{-->
<!--username:$("#username").val(),-->
<!--password:$("#password").val(),-->
<!--},function (res) {-->
<!--alert(res);-->
<!--}-->
<!--)-->
<!--})-->
<!--</script>-->
</head>
<body>
<from id="from1">
<p>username: <input type="text" name="name" id="name"></p><br>
<p>password: <input type="text" name="password" id="password"></p><br>
<p><input type="button" id="login" value="登录"></p><br>
<div id="restext"></div>
</from>
<script>
$("#login").click(function () {
var un=$("#name").val();
var pw=$("#password").val();
$.ajax({
type:"post",
url:"http://101.200.56.5:8080/Interest/login.action",
data:{
name: un,
password: pw,
},
dataType:"text",
error:function (XMLHttpRequest, textStatus, errorThrown) {
console.log(XMLHttpRequest);
console.log(textStatus);
console.log(errorThrown);
},
success:function (res) {
console.log(res);
}
});
})
</script>
</body>
</html>
这是完整前端代码。说说遇到的问题。
1、跨域问题,代码要放在和后端相同的域名下,要么用jsonp解决问题,要么后端把访问写成开放的。
2、dataType的问题,刚开始我把dataType写成string,发现控制台并没有报错。 即便我又加入了error函数。三个参数在控制台的返回值依然是各种成功。
查询发现dataType 的属性有两个 text,json。 根本没有string。