原生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 相关文章推荐
img标签中onerror用法
Aug 13 Javascript
javascript hasFocus使用实例
Jun 29 Javascript
JavaScript 获取当前时间戳的代码
Aug 05 Javascript
基于Jquery的实现回车键Enter切换焦点
Sep 14 Javascript
UI Events 用户界面事件
Jun 27 Javascript
javascript原生ajax写法分享
Apr 10 Javascript
JavaScript记录光标在编辑器中位置的实现方法
Apr 22 Javascript
JS实现DIV高度自适应窗口示例
Feb 16 Javascript
Element-ui table中过滤条件变更表格内容的方法
Mar 02 Javascript
微信sdk实现禁止微信分享(使用原生php实现)
Nov 15 Javascript
JavaScript禁止右击保存图片,禁止拖拽图片的实现代码
Apr 28 Javascript
JS setTimeout与setInterval的区别
Apr 20 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
数据库相关问题
2006/10/09 PHP
php.ini 中文版
2006/10/28 PHP
PHP面向对象学习笔记之一 基础概念
2012/10/06 PHP
PHP中操作ini配置文件的方法
2013/04/25 PHP
PHP中变量引用与变量销毁机制分析
2014/11/15 PHP
PHP微信分享开发详解
2017/01/14 PHP
laravel利用中间件做防非法登录和权限控制示例
2019/10/21 PHP
javascript 放大镜 v1.0 基于Yui2 实现的放大镜效果
2010/03/08 Javascript
网页下载文件期间如何防止用户对网页进行其他操作
2014/06/27 Javascript
js中一维数组和二位数组中的几个问题示例说明
2014/07/17 Javascript
JS实现控制表格行文本对齐的方法
2015/03/30 Javascript
webpack中引用jquery的简单实现
2016/06/08 Javascript
JS提示:Uncaught SyntaxError:Unexpected token ) 错误的解决方法
2016/08/19 Javascript
深入理解JavaScript 参数按值传递
2017/05/24 Javascript
Bootstrap Table使用整理(四)之工具栏
2017/06/09 Javascript
简单了解JavaScript中常见的反模式
2019/06/21 Javascript
Node.js安装详细步骤教程(Windows版)详解
2019/09/01 Javascript
JavaScript十大取整方法实例教程
2020/12/03 Javascript
[01:00:49]DOTA2-DPC中国联赛 正赛 Ehome vs iG BO3 第二场 1月31日
2021/03/11 DOTA
python将xml xsl文件生成html文件存储示例讲解
2013/12/03 Python
Python爬虫包BeautifulSoup简介与安装(一)
2018/06/17 Python
python 接收处理外带的参数方法
2018/12/03 Python
Pytorch to(device)用法
2020/01/08 Python
利用Python制作动态排名图的实现代码
2020/04/09 Python
基于Python制作一副扑克牌过程详解
2020/10/19 Python
详解CSS3中Media Queries的相关使用
2015/07/17 HTML / CSS
canvas裁剪clip()函数的具体使用
2018/03/01 HTML / CSS
印度手工编织服装和家居用品商店:Fabindi
2019/10/07 全球购物
银行个人求职自荐信范文
2013/12/16 职场文书
楼面经理岗位职责范本
2014/02/18 职场文书
《穷人》教学反思
2014/04/08 职场文书
小区物业门卫岗位职责
2014/04/10 职场文书
公司演讲稿开场白
2014/08/25 职场文书
运动会广播稿150字(9篇)
2014/09/20 职场文书
计算机考试作弊检讨书1000字
2015/01/01 职场文书
Springboot集成kafka高级应用实战分享
2022/08/14 Java/Android