$.ajax()
- $.ajax()方法概述:
$.ajax({type: \'get\',url: \'http://www.example.com\',data: { name: \'zhangsan\', age: \'20\' },contentType: \'application/x-www-form-urlencoded\',//允许在请求发送之前 调用函数 可以验证参数格式等beforeSend: function () {return false //不通过的话取消发送},//请求车成功 服务器端返回数据后 就会调用success: function (response) {},error: function (xhr) {}});
基础案例:
<body><button id=\"btn\">发送请求</button><script src=\"js/jquery.min.js\"></script><script>$(\'#btn\').on(\'click\', function () {$.ajax({// 请求方式type: \'get\',// 请求地址 也可以改成posturl: \'/base\',// 请求成功以后函数被调用success: function (response) {// response为服务器端返回的数据// 方法内部会自动将json字符串转换为json对象console.log(response);},// 请求失败以后函数被调用error: function (xhr) {console.log(xhr)}})});</script></body>
node.js代码:
app.get(\'/base\', (req, res) => {res.send({name: \'zhangsan\',age: 30})});app.post(\'/base\', (req, res) => {res.status(400).send({name: \'zhaoliu\',age: 35})});
注意:jquery文件目录要放在静态资源中 不然可能会报错
$.ajax()方法传递参数:
代码:
<body><button id=\"btn\">发送请求</button><script src=\"/js/jquery.min.js\"></script><script>$(\'#btn\').on(\'click\', function () {$.ajax({// 请求方式type: \'post\',// 请求地址url: \'/user\',// 在请求发送之前调用beforeSend: function () {alert(\'请求不会被发送\')// 请求不会被发送return false;},// 请求成功以后函数被调用success: function (response) {// response为服务器端返回的数据// 方法内部会自动将json字符串转换为json对象console.log(response);}})});</script></body>
-
data(表示向服务器端发送的请求参数):
1.可以是对象类型:data:{name: \'zhangsan\',age: \'100\'}
2.可以直接是属性=属性值:
data:{\'name=zhangsan&age=100\'}
-
contentType(指定参数格式类型)
1.‘application/x- www-form-urlencoded’——name=zhangsan&age=100类型
2. ‘application/json’—— {name: ‘wangwu’, age: 300} -
beforeSend: function () {} // 在请求发送之前调用——可用来验证一些参数格式
beforeSend: function () {alert(\'请求不会被发送\')// 请求不会被发送return false;//阻止请求发送},
短信验证代码: