$.ajax()方法实现同源数据请求
checkUsername.php
<?php
$username = $_GET["username"];
if($username == "admin"){
echo "username exists";
}else{
echo "username ok";
}
?>
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>注册界面</title>
</head>
<body>
<h1>注册界面</h1>
<form action="" method="get">
用户名:<input type="text" name="username" id="username"/>
<input type="button" value="验证用户名" id="btn">
<span id="result"></span>
</form>
<script src="jquery-3.3.1.js"></script>
<script>
$(document).ready(function(){
$("#btn").click(function(){
var uName = $("#username").val();
var obj ={
url:"checkUsername.php",
type: "get",
data:{username:uName},
dataType:"text",
async:true,
success:function(result){
$("#result").html(result);
}
};
$.ajax(obj);
});
});
</script>
</body>
</html>
$.ajax()方法实现跨域请求
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>百度提示词</title>
</head>
<body>
<input type="text" id="keyword" placeholder="请输入关键字"/>
<input type="button" id="btn" value="查询"/>
<div class="box"></div>
<script src="jquery-3.3.1.js"></script>
<script>
$(document).ready(function(){
$("#btn").click(function(){
var keyWord = $("#keyword").val();
var obj={
url:"https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su",
data:{wd:keyWord},
dataType: "jsonp",
jsonp:"cb",
success:function(data){
var list = "<ul>";
for(var i=0; i<data.s.length; i++){
var temp = data.s[i];
list += "<li>"+temp+"</li>";
}
list += "</ul>";
$(".box").html(list);
}
};
$.ajax(obj);
});
});
</script>
</body>
</html>
使用jQuery获取跨域数据:
必须:dataType:"jsonp",
jsonp默认值是"callback",
jsonpCallback默认的值是以jQuery开头的字符串,这个字符串就是函数调用的名称。