原生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 相关文章推荐
基于jquery实现的表格分页实现代码
Jun 21 Javascript
15个款优秀的 jQuery 图片特效插件推荐
Nov 21 Javascript
JQuery获取各种宽度、高度(format函数)实例
Mar 04 Javascript
js replace 与replaceall实例用法详解
Aug 03 Javascript
原生javaScript做得动态表格(注释写的很清楚)
Dec 29 Javascript
完善的jquery处理机制
Feb 21 Javascript
Vue.js每天必学之过滤器与自定义过滤器
Sep 07 Javascript
javascript实现Emrips反质数枚举的示例代码
Dec 06 Javascript
Vue 与 Vuex 的第一次接触遇到的坑
Aug 16 Javascript
关于vue3默认把所有onSomething当作v-on事件绑定的思考
May 15 Javascript
简单了解JavaScript arguement原理及作用
May 28 Javascript
微信小程序实现弹幕墙(祝福墙)
Nov 18 Javascript
在 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检测图片木马多进制编程实践
2013/04/11 PHP
php操作xml入门之xml标签的属性分析
2015/01/23 PHP
老生常谈PHP位运算的用途
2017/03/12 PHP
jquery DOM操作 基于命令改变页面
2010/05/06 Javascript
javascript学习笔记(七) js函数介绍
2012/06/19 Javascript
显示今天的日期js代码(阳历和农历)
2014/09/30 Javascript
js实现下拉框选择要显示图片的方法
2015/02/16 Javascript
简化版手机端照片预览组件
2015/04/13 Javascript
详谈LABJS按需动态加载js文件
2015/05/07 Javascript
纯javascript制作日历控件
2015/07/17 Javascript
Jquery attr()方法 属性赋值和属性获取详解
2016/04/15 Javascript
JavaScript仿淘宝页面图片滚动加载及刷新回顶部的方法解析
2016/05/24 Javascript
自动化测试读写64位操作系统的注册表
2016/08/15 Javascript
jQuery插件FusionCharts实现的MSBar2D图效果示例【附demo源码】
2017/03/24 jQuery
vue.js 初体验之Chrome 插件开发实录
2017/05/13 Javascript
javascript 初学教程及五子棋小程序的简单实现
2017/07/04 Javascript
javascript使用链接跨域下载图片
2019/11/01 Javascript
vue.js实现照片放大功能
2020/06/23 Javascript
Python修改Excel数据的实例代码
2013/11/01 Python
深入理解python中的浅拷贝和深拷贝
2016/05/30 Python
Python实现完整的事务操作示例
2017/06/20 Python
Python实现嵌套列表去重方法示例
2017/12/28 Python
VSCode下配置python调试运行环境的方法
2018/04/06 Python
python3个性签名设计实现代码
2018/06/19 Python
django Serializer序列化使用方法详解
2018/10/16 Python
Python编程flask使用页面模版的方法
2018/12/28 Python
keras实现theano和tensorflow训练的模型相互转换
2020/06/19 Python
CSS3实现的炫酷菜单代码分享
2015/03/12 HTML / CSS
沙特阿拉伯电子产品和家用电器购物网站:Black Box
2019/07/24 全球购物
介绍一下linux文件系统分配策略
2013/02/25 面试题
医药营销个人求职信范文
2014/02/07 职场文书
一夜的工作教学反思
2014/02/08 职场文书
最美乡村医生事迹材料
2014/06/02 职场文书
工作失职检讨书(精华篇)
2014/10/15 职场文书
2014年销售员工作总结
2014/12/01 职场文书
斗罗大陆八大特殊魂兽,龙族始祖排榜首,第五最残忍(翠魔鸟)
2022/03/18 国漫