ajax用法解析

- ajax
ajax技术的目的是让javascript发送http请求,与后台通信,获取数据和信息。ajax技术的原理是实例化xmlhttp对象,使用此对象与后台通信。ajax通信的过程不会影响后续javascript的执行,从而实现异步。

  • $.ajax使用方法
    常用参数:
    1、url请求地址
    2、type请求方式,默认是’GET,常用的还有’POST’
    3、dataType 设置返回的数据格式,常用的是’json格式,也可以设置为’html’
    4、data设置发送给服务器的数据
    5、success设置请求成功后的回调函数
    6、error设置请求失败后的回调函数
    7、async设置是否异步,默认值是’true,表示异步

案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="main.js" type="text/javascript"></script>

    <script>
        $(function(){
            $("#btn").click(function(){

                var data = {
                        phone:$("#phone").val(),
                        userName:$("#userName").val(),
                        pwd:$("#pwd").val(),
                        rePwd:$("#repwd").val(),
                    }

                $.ajax({
                    type:"POST",//请求方法为post
                    url:"http://qa.yansl.com:8084/signup",// url
                    contentType:"application/json;charset=utf-8",
                    dataType:"json", //响应数据类型
                    data:JSON.stringify(data), // 把对象转换成json字符串,data可以是字符串也可以是对象,但是如果是对象的话会把对象转成键值对类型,
                    success:function (data) {
                        if(data.code == '2000'){
                            window.location.reload(true); //刷新当前页面
                            alert("注册成功");
                        }else{
                            alert(data.message)
                        }
                    }
                })
            })
        });
    </script>

</head>
<body>

    <table>
        <tr>
            <td><label for="phone">手机号</label></td>
            <td>
                <input type="text" id="phone">
            </td>
        </tr>
        <tr>
            <td><label for="userName">用户名</label></td>
            <td>
                <input type="text" id="userName">
            </td>
        </tr>
        <tr>
            <td><label for="pwd">密码</label></td>
            <td>
                <input type="password" id="pwd">
            </td>
        </tr>
        <tr>
            <td><label for="repwd">确认密码</label></td>
            <td>
                <input type="password" id="repwd"/>
            </td>
        </tr>
        <tr>
            <td colspan="2"><input type="button" id="btn" value="提交注册"></td>
        </tr>
    </table>
</body>
</html>

展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 深蓝海洋 设计师: CSDN官方博客
应支付0元
点击重新获取
扫码支付

支付成功即可阅读