8.17久违的笔记......Ajax
2017-08-17 本文已影响13人
xlayzheng
Ajax
1.两种数据传输方式：
get / post
get 请求信息会在地址栏显示，跨域一般使用get方法
post 适用于比较隐秘的数据
使用方法（下面都是jq封装的ajax的使用）
$.ajax({
type:"get", //或者post
url:"forajax.php",
async:true,
dataType：“text”, //php访问对象文件时一般用text
success:function(data){ //data固定参数为请求完成后得到的数据
alert(data);
}，
complete:function(){ //请求完成后进行的操作
}，
})
获取自己的数据库数据，或者php后台处理过的数据这是一个登录功能的js部分 . 有php后台文件，所以必须从服务器的www文件进入页面 。localhost：8080或者直接用ip/xlayzheng/...
$.ajax({
type:"post",
url:"php/login-register.php", //这是数据传向的php文件
data:{
username:usernameVal,
userpwd:userpwdVal,
type:"login"
},
dataType:"text",
success:function(data){
if (data === "success") {
alert(usernameVal+",欢迎！")
$("#uname").val("");
$("#upwd").val("");
} else{
alert("用户名或密码错误！");
$("#upwd").val("");
}
},
})
--------------------------------------------------php部分---------------------------------------------------------------------
<?php
//获取数据
$_username = $_POST['username']; //什么方法传输的数据就是什么方法接受
$_userpwd = $_POST['userpwd'];
$_type = $_POST['type']; //传输的data的type属性,用以判断执行哪条语句
//第一步，定义数据库的信息
define("HOST","127.0.0.1"); //定义主机名
define("PORT","3306"); //定义端口号默认3306
define("DB_NAME","root"); //定义数据名用户名
define("DB_PWD","123456"); //定义用户名SQL数据库的密码
define("DB_CON","jenashop");//定义自己要操作的的数据库名
//-------------------------------------------------------------------第二步，创建数据库连接
$_link = new mysqli(HOST,DB_NAME,DB_PWD,DB_CON,PORT);
//------------------------------------------------------------------ 设置字符编码
$_link->set_charset("utf8");
if($_type==="login"){
//-----------------------------------------------------------第三步，创建一条数据库语句
$_sql = 'SELECT userpwd from userinfo WHERE username="'.$_username.'"';
//-----------------------------------------------------------执行查询语句
$_res = $_link->query($_sql);
//----------------------------------------------------------遍历结果集合，即使只有一行也要这一步
$_row = $_res->fetch_row();
//----------------------------------------------------------判断密码是否正确
if($_row[0] == $_userpwd){
echo "success";
}else {
echo "error";
}
//-----------------------------------------------------------释放数据
$_res->free();
}else{
//--------------------------------------------------------- 创建语句
$_sqlinsert = 'INSERT into userinfo(username,userpwd) value ("'.$_username.'","'.$_userpwd.'")';
//----------------------------------------------------------执行语句
$_resinsert = $_link->query($_sqlinsert);
//------------------------------------------------------------检查是否执行成功，注意后面是affected_rows
$_r = $_link->affected_rows;
echo $_r;
}
//------------------------------------------------------------------关闭数据库连接
$_link->close();
?>
Ajax跨域获取数据的例子 获取到可以请求的地址后，利用Ajax，十分方便取到网站的数据
<script type="text/javascript">
$(function(){
//输入框内，每次鼠标弹起时，进行搜索，并返回联想商品，与数量
$('.txt').on('keyup',function(){
$.ajax({
type:"get", //跨域请求一般用get方式
//天猫的数据地址
url:"https://suggest.taobao.com/sug?code=utf-8&q="+$('.txt').val()+"&_ksTS=1502958378801_4787&callback=jsonp4788&area=b2c&code=utf-8&k=1&bucketid=9&src=tmall_pc&isg=AsnJLVFs9O3EkIh2LbbvIw402PXjvr2QxO1ir2s-RbDvsunEtGbNGLfkgCD_",
//淘宝的数据地址
//url:"https://suggest.taobao.com/sug?code=utf-8&q=手机&_ksTS=1502958214110_1909&callback=jsonp1910&k=1&area=c2c&bucketid=1",
dataType:"jsonp",
jsonp:"callback", //百度的为cb,可以在网页数据传输时在地址栏确定不同网站的jsonp值
async:true,
success:function(data){
var res = data.result;
$(".result").html("");
for(var i = 0 ; i<res.length; i++){
$(".result").append($("<li><a target='_blank'>"+res[i][0]+"</a><span>约"+res[i][1]+"件相关商品>><span></li>"));
}
}
})
})
//商品搜索链接：
//https://list.tmall.com/search_product.htm?q=%E7%94%B5%E8%84%91&type=p&vmarket=&spm=875.7931836%2FB.a2227oh.d100&from=mallfp..pc_1_searchbutton
//点击下面的联想商品进入相应页面
$(".result").on("click","li",function(e){
event.stopPropagation();
$(this).children().attr('href',"https://list.tmall.com/search_product.htm?q="+$(this).children().first().html()+"&type=p&vmarket=&spm=875.7931836%2FB.a2227oh.d100&from=mallfp..pc_1_searchbutton");
$(".txt").val( $(this).children().first().html());
$(".result").html("");
})
//点击搜索，进入文本框对应商品的结果页面
$(".search").on("click",function(){
$(".result").html("");
$(this).attr('href',"https://list.tmall.com/search_product.htm?q="+$(".txt").val()+"&type=p&vmarket=&spm=875.7931836%2FB.a2227oh.d100&from=mallfp..pc_1_searchbutton");
})
//点击文本框以外的地方时，取消联想
$(document).on("click",function(){
$(".result").html("");
$(".txt").val("");
})
})
</script>
-----------------------------------------------------------html部分----------------------------------------------------------------------
<body>
<div class="box">
<input type="text" class="txt" placeholder="请输入商品名" />
<a target="_blank" class="search">搜 索</a>
<ul class="result"></ul>
</div>
</body>
在php文件的编写中，基础的会用到的流程都在上述例子中。
1.变量的声明是用 $ 符。
2.数据的接收方法要与传输的方法一致
3.创建数据连接时。端口号（本例中是PORT）必须是放再最后的。MySQL默认是3306。
4.设置字符编码也是很重要的，不然可能传输后的数据改变了编码格式，以至于后面的处理判断出现问题。
5.数据的释放有时会对整个代码的运行产生影响，这个看具体情况。
6.操作完成后记得要关闭数据库连接。
