原生javascript的ajax请求及后台PHP响应操作示例


Posted in Javascript onFebruary 24, 2020

本文实例讲述了原生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文件

<?php
  header("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";
  }
?>
<!-- 保存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 相关文章推荐
jValidate 基于jQuery的表单验证插件
Dec 12 Javascript
jquerymobile checkbox及时刷新才能获取其准确值
Apr 14 Javascript
jquery ajax,ashx,json的用法总结
Feb 12 Javascript
Javascript基础教程之数据类型 (字符串 String)
Jan 18 Javascript
ajax异步请求详解
Jan 06 Javascript
bootstrap vue.js实现tab效果
Feb 07 Javascript
浅析Vue自定义组件的v-model
Nov 26 Javascript
vue实现codemirror代码编辑器中的SQL代码格式化功能
Aug 27 Javascript
layui--select使用以及下拉框实现键盘选择的例子
Sep 24 Javascript
JavaScript canvas绘制圆弧与圆形
Feb 18 Javascript
vue导入.md文件的步骤(markdown转HTML)
Dec 31 Vue.js
Vue组件化(ref,props, mixin,.插件)详解
May 15 Vue.js
在 Vue 中编写 SVG 图标组件的方法
Feb 24 #Javascript
原生javascript中this几种常见用法总结
Feb 24 #Javascript
js实现坦克大战游戏
Feb 24 #Javascript
Vue中点击active并第一个默认选中功能的实现
Feb 24 #Javascript
如何在JavaScript中创建具有多个空格的字符串?
Feb 23 #Javascript
浅谈TypeScript的类型保护机制
Feb 23 #Javascript
原生javascript制作的拼图游戏实现方法详解
Feb 23 #Javascript
You might like
支持中文的php加密解密类代码
2011/11/27 PHP
Laravel 5框架学习之数据库迁移(Migrations)
2015/04/08 PHP
PHP中让json_encode不自动转义斜杠“/”的方法
2017/02/28 PHP
PHP获取当前系统时间的方法小结
2018/10/03 PHP
PHP Trait功能与用法实例分析
2020/06/03 PHP
jquery $.ajax各个事件执行顺序
2010/10/15 Javascript
jquery实现metro效果示例代码
2013/09/06 Javascript
JavaScript中字符串(string)转json的2种方法
2015/06/25 Javascript
jQuery实现鼠标点击弹出渐变层的方法
2015/07/09 Javascript
浅谈js里面的InttoStr和StrtoInt
2016/06/14 Javascript
jQuery获取多种input值的简单实现方法
2016/06/20 Javascript
后端接收不到AngularJs中$http.post发送的数据原因分析及解决办法
2016/07/05 Javascript
总结在前端排序中遇到的问题
2016/07/19 Javascript
简洁实用的BootStrap jQuery手风琴插件
2016/08/31 Javascript
Angular.js中用ng-repeat-start实现自定义显示
2016/10/18 Javascript
详解JavaScript中的属性和特性
2016/12/08 Javascript
socket.io与pm2(cluster)集群搭配的解决方案
2017/06/02 Javascript
基于 webpack2 实现的多入口项目脚手架详解
2017/06/26 Javascript
使用Vue如何写一个双向数据绑定(面试常见)
2018/04/20 Javascript
Vue 让元素抖动/摆动起来的实现代码
2018/05/31 Javascript
详解为生产环境编译Angular2应用的方法
2018/12/10 Javascript
[56:21]LGD vs IG 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
[01:03:56]Mineski vs TNC 2018国际邀请赛淘汰赛BO1 8.21
2018/08/22 DOTA
[42:06]2019国际邀请赛全明星赛 8.23
2019/09/05 DOTA
python web基础之加载静态文件实例
2018/03/20 Python
浅析Python 3 字符串中的 STR 和 Bytes 有什么区别
2018/10/14 Python
Python爬虫小例子——爬取51job发布的工作职位
2020/07/10 Python
程序集与命名空间有什么不同
2014/07/25 面试题
幼儿园小班植树节活动方案
2014/03/04 职场文书
材料会计岗位职责
2014/03/06 职场文书
副总经理岗位职责
2014/03/16 职场文书
希特勒经典演讲稿
2014/05/19 职场文书
高中课前三分钟演讲稿
2014/09/13 职场文书
公安派出所所长四风问题个人对照检查材料
2014/10/04 职场文书
美丽的大脚观后感
2015/06/03 职场文书
webpack介绍使用配置教程详解webpack介绍和使用
2022/06/25 Javascript