AI智能
改变未来

用jQuery封装ajax的笔记总结


$.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;//阻止请求发送},

短信验证代码:

赞(0) 打赏
未经允许不得转载:爱站程序员基地 » 用jQuery封装ajax的笔记总结