jquery下使用ajax教程

一：html中ajax的使用

通过一个小domo帮助大家理解ajax的使用：首页登录动态刷新验证账号是否存在，这里不从数据库抽取数据了，直接将已存在的账号写死来验证。
登录页面

<div class="dowebok">
        <div class="logo"></div>
        <div class="form-item">
            <input id="username" type="text" autocomplete="off" placeholder="邮箱/用户名/手机号">
            <p id="tip1"></p>
        </div>
        <div class="form-item">
            <input id="password" type="password" autocomplete="off" placeholder="登录密码">
            <p id="tip2"></p>
        </div>
        <div class="form-item"><button id="submit">登 录</button></div>
        <div class="reg-bar">
            <a class="reg" href="zc.html">立即注册</a>
            <a class="forget" href="javascript:">忘记密码</a>
        </div>
    </div>

记住要引用jquery当用户名进行失焦事件是就可以就行验证了
js代码

$.ajax({
                url:'http://101.37.175.185:3000/register_validation',
                type:'GET',
                data:{
                    uname:yhm,
                },
                success:function(response){
                        // 请求成功以后才会执行
                       console.log(response);
                       yh=true;
                        if(response==0){
                            $('#tip1').text("用户名已存在");
                        }else{
                            $('#tip1').text("");
                        }
                    },
                    error:function(e){
                        // 请求失败才执行
                        console.log(e);
                    },
            });

你发送一个请求服务器会返回一个数据回来，你进行判断看是否有存在

1ajax使用方式
type： 默认值: “GET”)。请求方式 (“POST” 或 “GET”)， 默认为 “GET”

url： 默认值: 当前页地址。发送请求的地址。

data： 发送到服务器的数据。将自动转换为请求字符串格式。GET 请求中将附加在 URL 后。 必须为 Key/Value 格式

contentType： 发送信息至服务器时内容编码类型。

dataType： 预期服务器返回的数据类型。如果不指定，jQuery 将自动根据 HTTP 包 MIME 信息来智能判断

success： 请求成功后的回调函数。参数：由服务器返回，并根据 dataType 参数进行处理后的数据；描述状态的字符串。
2.传递json对象

     $.ajax({
                    type: 'post',
                    url: '/news/addnews',
                    contentType: "application/json; charset=utf-8",
                    data: JSON.stringify(data.field),
                    success: function (data) {
                      
                            location.href="/gover_index_1.html"
                    
                    }
                }
            );

要解决跨域问题

response.addHeader(‘Access-Control-Allow-Origin:*’);//允许所有来源访问 
response.addHeader(‘Access-Control-Allow-Method:POST,GET’);//允许访问的方式