DDR爱好者之家

原生javascript的ajax请求及后台PHP响应操作示例
站长资源 2024/11/24 佚名
2 1538
DDR爱好者之家 Design By 杰米

本文实例讲述了原生javascript的ajax请求及后台PHP响应操作。分享给大家供大家参考，具体如下：

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <table id="t">
    <tr>
      <td>学号:</td>
      <td><input type="text" id="stuid" /></td>
    </tr>
    <tr>
      <td>密码:</td>
      <td><input type="password" id="stupass" /></td>
    </tr>
    <tr>
      <td colspan="2">
        <input id="btnLogin" type="button" value="登录" />
      </td>
    </tr>
  </table>
</body>
</html>

ajax的一般步骤

1、创建对象

let xhr = new XMLHttpRequest();

2、设置请求参数

xhr.open(请求方式,请求地址，是否异步);

3、设置回调函数

xhr.onreadystatechange = function () {
    // 5、接收响应
  alert(xhr.responseText);
}

4、发送

xhr.send();


<script type="text/javascript">
window.onload = function(){
  $("#btnLogin").onclick = function(){
    //1、创建对象
    let xhr = new XMLHttpRequest();
    //2、设置请求参数
    xhr.open('post','loginCheckajax.php',true);
    //3、设置回调函数
    xhr.onreadystatechange = function(){
      if(xhr.readyState==4 && xhr.status==200){
        if(xhr.responseText=='1'){
          //存cookie
          saveCookie("username",$("#stuid").value,7);
          //挑到首页
          location.href="index.html" rel="external nofollow" ;
        }else{
          alert("登录失败！");
        }
      }
    }
    xhr.setRequestHeader('Content-type','application/x-www-form-urlencoded');
    //4、发送
    xhr.send("stuid="+$("#stuid").value+"&stupass="+$("#stupass").value);
  }
}
function $(str){  //id class tagname
  if(str.charAt(0) == "#"){
    return document.getElementById(str.substring(1));
  }else if(str.charAt(0) == "."){
    return document.getElementsByClassName(str.substring(1));
  }else{
    return document.getElementsByTagName(str);
  }
}
</script>

php文件

<"Content-type:text/html;charset=utf-8");
  //一、获取用户的输入
  $stuid = $_POST['stuid'];
  $stupass = $_POST['stupass'];
  //二、处理
  //1、建立连接（搭桥）
  $conn = mysql_connect('localhost','root','root');
  if(!$conn){
    die("连接失败");
  }
  //2、选择数据库（选择目的地）
  mysql_select_db("mydb1809",$conn);
  //3、执行SQL语句（传输数据）
  $sqlstr="select * from student where stuid='$stuid' and stupass='$stupass'";
  $result = mysql_query($sqlstr,$conn);//结果是个表格
  //4、关闭数据库（过河拆桥）
  mysql_close($conn);
  //三、响应
  if(mysql_num_rows($result)>0){
    echo "1";
  }else{
    echo "0";
  }
"htmlcode">



<!-- 保存cookie -->
<script>
  // saveCookie
//保存cookie
//参数：
//键
//值
//有效期（单位是：天）
//返回值：无
function saveCookie(key,value,dayCount){
  var d = new Date();
  d.setDate(d.getDate()+dayCount);
  document.cookie = key+'='+escape(value)+';expires='+d.toGMTString();
}
//获取cookie(根据键获取值)
//参数:
//键
//返回值：值
function getCookie(key){
  var str = unescape(document.cookie);//username=jzm; userpass=1236667
  //1、分割成数组（; ）
  var arr = str.split('; ');//['username=jzm','userpass=1236667']
  //2、从数组查找key=;
  for(var i in arr){
    if(arr[i].indexOf(key+'=')==0){
      return arr[i].split('=')[1];
    }
  }
  return null;
}
//删除cookie
//参数：
//键
//返回值：无
function removeCookie(key){
  saveCookie(key,'',-1);
}
</script>







更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《JavaScript中ajax操作技巧总结》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》


希望本文所述对大家JavaScript程序设计有所帮助。
DDR爱好者之家 Design By 杰米
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
DDR爱好者之家 Design By 杰米
ddrfans.com DDR爱好者之家
8,675无损音乐
1,324高清电影
213破解软件
70,141收录资讯

《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线

暴雪近日发布了《魔兽世界》10.2.6 更新内容，新游玩模式《强袭风暴》即将于3月21 日在亚服上线，届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。

艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕，并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时，他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中，玩家将会进入一个全新的海盗主题大逃杀式限时活动，其中包含极高的风险和史诗级的奖励。

《强袭风暴》不是普通的战场，作为一个独立于主游戏之外的活动，玩家可以用大逃杀的风格来体验《魔兽世界》，不分职业、不分装备（除了你在赛局中捡到的），光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式，玩家在加入海盗主题的预赛大厅区域前，可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹，《巨龙崛起》和《魔兽世界：巫妖王之怒 经典版》的玩家都可以获得奖励。

更新日志

友情链接

杰晶网络 DDR爱好者之家 南强小屋 黑松山资源网 白云城资源网
DDR爱好者之家 Design By 杰米