蝙蝠岛资源网

js结合json实现ajax简单实例
网络编程 2024/12/26 佚名
2 0
蝙蝠岛资源网 Design By www.hbtsch.com

前期准备

1、安装wampserver或者其他相似软件来搭建本地集成安装环境，我安装的是phpstudy
2、html、js、css等文件需要放置在PHPstudy中的WWW目录中，默认运行index页面
3、bootstrap.css

界面截图：

js结合json实现ajax简单实例

phpstudy用起来很方便，如果你的电脑没有安装过php，那要先配置系统环境变量，将php.exe(在PHPstudy的安装目录里找)的路径添加进去，然后在cmd里输入 php -v ,出现php的安装版本等信息则说明安装成功。

js结合json实现ajax简单实例

然后新建一个项目在PHPstudy的WWW文件夹下，这里我取名为AjaxDemo。

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>index</title>
  <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" />
  <style>
    .container{ width: 50%; margin-top: 30px; }
    .text-danger{ margin-top: 6px; }
  </style>
</head>
<body>
  <div class="container">
    <div class="panel panel-default">
      <div class="panel-heading">
        <div class="panel-title">员工查询</div>
      </div>
      <div class="panel-body">
        <div class="form-horizontal">
          <div class="form-group">
            <label class="col-md-2 control-label">员工编号：</label>
            <div class="col-md-8">
              <input type="text" class="form-control" id="keyword">              
            </div>
            <div class="col-md-1">
              <button class="btn btn-primary" id="search">查询</button>
            </div>
          </div>
          <div class="form-group">
            <label class="col-md-2 control-label">查询结果：</label>
            <p class="text-danger col-md-8" id="searchResult"></p>
          </div>
        </div>        
      </div>
    </div>
  </div>
  <div class="container">
    <div class="panel panel-default">
      <div class="panel-heading">
        <div class="panel-title">员工增加</div>
      </div>
      <div class="panel-body">
        <div class="form-horizontal">
          <div class="form-group">
            <label class="col-md-2 control-label">员工编号：</label>
            <div class="col-md-8">
              <input type="text" class="form-control" id="add-number">
            </div>
          </div>
          <div class="form-group">
            <label class="col-md-2 control-label">员工姓名：</label>
            <div class="col-md-8">
              <input type="text" class="form-control" id="add-name">
            </div>
          </div>
          <div class="form-group">
            <label class="col-md-2 control-label">员工性别：</label>
            <div class="col-md-8">
              <input type="text" class="form-control" id="add-sex">
            </div>
          </div>
          <div class="form-group">
            <label class="col-md-2 control-label">员工职位：</label>
            <div class="col-md-8">
              <input type="text" class="form-control" id="add-job">
            </div>
          </div>
          <div class="form-group">
            <div class="col-md-offset-2 col-md-1">              
              <button class="btn btn-primary" id="add-search">增加员工</button>
            </div>
          </div>
          <div class="form-group">
            <label class="col-md-2 control-label">结果：</label>
            <p class="text-danger col-md-8" id="add-resultshow"></p>
          </div>
        </div>        
      </div>
    </div>
  </div>
  <script src="/UploadFiles/2021-04-02/staffManage.js">


staffManage.js


实例化Ajax可分为五点，比较好记： 




1、new一个XMLHttpRequest实例 

注意兼容低版本的IE浏览器 







var xhr; 
if (window.XMLHttpRequest) { 
xhr= new XMLHttpRequest(); 
} else { 
xhr= new ActiveXObject(‘Microsoft.XMLHTTP'); 
} 






2、open(method,url,asyn) 

XMLHttpRequest对象的open()方法有3个参数，第一个参数指定是GET还是POST，第二个参数指定URL地址，第三个参数指定是否使用异步，默认是true，所以不用写。 




3*若是post请求还要加上请求头 setRequestHeader（”Content-Type”,”application/x-www-form-urlencoded”） 




4、send 

调用send()方法才真正发送请求。GET请求不需要参数，POST请求需要把body部分以字符串或者FormData对象传进去。


5、onReadyStateChange 




6、responseText





// 查询员工方法
    var oKeyword=document.getElementById('keyword'),　　　　 //员工编号
      oSearchBtn=document.getElementById('search'),　　　　 //查询按钮
      oSearchRes=document.getElementById('searchResult'); //反馈结果显示

    // 查询员工按钮点击事件  
    oSearchBtn.onclick=function(){
      searchStaff();
    }
    // 创建查询员工方法
    function searchStaff(){
      //var xhr=new XMLHttpRequest();
      //标准写法和IE写法混在一起，可以兼容低版本的IE浏览器
      var xhr;
      if (window.XMLHttpRequest) {
        xhr= new XMLHttpRequest();
      } else {
        xhr= new ActiveXObject('Microsoft.XMLHTTP');
      }

      xhr.open('GET','serverjson.php"htmlcode">



<"Content-Type: text/plain;charset=utf-8"); 
//header("Content-Type: application/json;charset=utf-8"); 
//header("Content-Type: text/xml;charset=utf-8"); 
//header("Content-Type: text/html;charset=utf-8"); 
//header("Content-Type: application/javascript;charset=utf-8");

//定义一个多维数组，包含员工的信息，每条员工信息为一个数组
$staff = array
  (
    array("name" => "洪七", "number" => "101", "sex" => "男", "job" => "总经理"),
    array("name" => "郭靖", "number" => "102", "sex" => "男", "job" => "开发工程师"),
    array("name" => "黄蓉", "number" => "103", "sex" => "女", "job" => "产品经理")
  );

//判断如果是get请求，则进行搜索；如果是POST请求，则进行新建
//$_SERVER是一个超全局变量，在一个脚本的全部作用域中都可用，不用使用global关键字
//$_SERVER["REQUEST_METHOD"]返回访问页面使用的请求方法
if ($_SERVER["REQUEST_METHOD"] == "GET") {
  search();
} elseif ($_SERVER["REQUEST_METHOD"] == "POST"){
  create();
}

//通过员工编号搜索员工
function search(){
  //检查是否有员工编号的参数
  //isset检测变量是否设置；empty判断值为否为空
  //超全局变量 $_GET 和 $_POST 用于收集表单数据
  if (!isset($_GET["number"]) || empty($_GET["number"])) {
    echo '{"success":false,"msg":"参数错误"}';
    return;
  }
  //函数之外声明的变量拥有 Global 作用域，只能在函数以外进行访问。
  //global 关键词用于访问函数内的全局变量
  global $staff;
  //获取number参数
  $number = $_GET["number"];
  $result = '{"success":false,"msg":"没有找到员工。"}';

  //遍历$staff多维数组，查找key值为number的员工是否存在，如果存在，则修改返回结果
  foreach ($staff as $value) {
    if ($value["number"] == $number) {
      $result = '{"success":true,"msg":"找到员工：员工编号：' . $value["number"] . 
              '，员工姓名：' . $value["name"] . 
              '，员工性别：' . $value["sex"] . 
              '，员工职位：' . $value["job"] . '"}';
      break;
    }
  }
  echo $result;
}

//创建员工
function create(){
  //判断信息是否填写完全
  if (!isset($_POST["name"]) || empty($_POST["name"])
    || !isset($_POST["number"]) || empty($_POST["number"])
    || !isset($_POST["sex"]) || empty($_POST["sex"])
    || !isset($_POST["job"]) || empty($_POST["job"])) {
    echo '{"success":false,"msg":"参数错误，员工信息填写不全"}';
    return;
  }
  //TODO: 获取POST表单数据并保存到数据库

  //提示保存成功
  echo '{"success":true,"msg":"员工：' . $_POST["name"] . ' 信息保存成功！"}';
}

"text-align: center">js结合json实现ajax简单实例


以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。


                                

                                

                                     

                                

                                    标签：
                                        
js,json,ajax

                                     

                                
蝙蝠岛资源网 Design By www.hbtsch.com
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
蝙蝠岛资源网 Design By www.hbtsch.com

评论“js结合json实现ajax简单实例”

暂无js结合json实现ajax简单实例的评论...
www.hbtsch.com 蝙蝠岛资源网
139,976影音资源
144,792福利资源
21,817软件资源
631,128技术资源

P70系列延期，华为新旗舰将在下月发布

3月20日消息，近期博主@数码闲聊站 透露，原定三月份发布的华为新旗舰P70系列延期发布，预计4月份上市。

而博主@定焦数码 爆料，华为的P70系列在定位上已经超过了Mate60，成为了重要的旗舰系列之一。它肩负着重返影像领域顶尖的使命。那么这次P70会带来哪些令人惊艳的创新呢？

根据目前爆料的消息来看，华为P70系列将推出三个版本，其中P70和P70 Pro采用了三角形的摄像头模组设计，而P70 Art则采用了与上一代P60 Art相似的不规则形状设计。这样的外观是否好看见仁见智，但辨识度绝对拉满。

更新日志

友情链接

杰晶网络 DDR爱好者之家 桃源资源网 杰网资源 富贵资源网 南强小屋 铁雪资源网 幽灵资源网 万梅资源网 狼山资源网 白云岛资源网 昆仑资源网 相思资源网 明霞山资源网 内蒙古资源网 黑松山资源网 茶园资源网 饿虎岗资源网 大旗谷资源网 常春岛资源网 岱庙资源网 兴国资源网 快活林资源网 蝙蝠岛资源网 帝王谷资源网 白云城资源网 伏龙阁资源网 清风细雨楼 天枫庄资源网 圆月山庄资源网 无争山庄资源网 神水资源网 移花宫资源网 神剑山庄资源网 无为清净楼资源网 金钱帮资源网 丐帮资源网 华山资源网 极乐门资源网 小李飞刀资源网 凤求凰客栈 风云阁资源网 金狮镖局 鸳鸯亭资源网 千金楼资源网 更多链接
蝙蝠岛资源网 Design By www.hbtsch.com