一: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’);//允许访问的方式