suchen

Heim >Web-Frontend >js-Tutorial >js kombiniert mit json, um ein einfaches Ajax-Beispiel zu implementieren

js kombiniert mit json, um ein einfaches Ajax-Beispiel zu implementieren

亚连
亚连Original
2018-05-22 14:39:151122Durchsuche

In diesem Artikel werden hauptsächlich relevante Informationen zu einfachen Beispielen für die Implementierung von Ajax durch die Kombination von js und json vorgestellt. Er hat einen gewissen Referenzwert.

Vorbereitende Vorbereitungen

1. Installieren Sie Wampserver oder eine andere ähnliche Software, um eine lokale integrierte Installationsumgebung zu erstellen
2. HTML, JS, CSS und andere Dateien müssen standardmäßig im WWW-Verzeichnis abgelegt werden
3. bootstrap.css

Schnittstellen-Screenshot:

phpstudy ist sehr praktisch zu verwenden, wenn auf Ihrem Computer kein PHP installiert ist Fügen Sie der Umgebungsvariablen zuerst den Pfad zu php.exe hinzu (finden Sie ihn im PHPstudy-Installationsverzeichnis) und geben Sie dann php -v in cmd ein. Wenn die Installationsversion von PHP und andere Informationen angezeigt werden, bedeutet dies die Installation ist erfolgreich.

Dann erstellen Sie ein neues Projekt im WWW-Ordner von PHPstudy, hier habe ich es AjaxDemo genannt.

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>
  <p class="container">
    <p class="panel panel-default">
      <p class="panel-heading">
        <p class="panel-title">员工查询</p>
      </p>
      <p class="panel-body">
        <p class="form-horizontal">
          <p class="form-group">
            <label class="col-md-2 control-label">员工编号：</label>
            <p class="col-md-8">
              <input type="text" class="form-control" id="keyword">              
            </p>
            <p class="col-md-1">
              <button class="btn btn-primary" id="search">查询</button>
            </p>
          </p>
          <p class="form-group">
            <label class="col-md-2 control-label">查询结果：</label>
            <p class="text-danger col-md-8" id="searchResult"></p>
          </p>
        </p>        
      </p>
    </p>
  </p>
  <p class="container">
    <p class="panel panel-default">
      <p class="panel-heading">
        <p class="panel-title">员工增加</p>
      </p>
      <p class="panel-body">
        <p class="form-horizontal">
          <p class="form-group">
            <label class="col-md-2 control-label">员工编号：</label>
            <p class="col-md-8">
              <input type="text" class="form-control" id="add-number">
            </p>
          </p>
          <p class="form-group">
            <label class="col-md-2 control-label">员工姓名：</label>
            <p class="col-md-8">
              <input type="text" class="form-control" id="add-name">
            </p>
          </p>
          <p class="form-group">
            <label class="col-md-2 control-label">员工性别：</label>
            <p class="col-md-8">
              <input type="text" class="form-control" id="add-sex">
            </p>
          </p>
          <p class="form-group">
            <label class="col-md-2 control-label">员工职位：</label>
            <p class="col-md-8">
              <input type="text" class="form-control" id="add-job">
            </p>
          </p>
          <p class="form-group">
            <p class="col-md-offset-2 col-md-1">              
              <button class="btn btn-primary" id="add-search">增加员工</button>
            </p>
          </p>
          <p class="form-group">
            <label class="col-md-2 control-label">结果：</label>
            <p class="text-danger col-md-8" id="add-resultshow"></p>
          </p>
        </p>        
      </p>
    </p>
  </p>
  <script src="staffManage.js"></script>
</body>
</html>

staffManage.js

Die Ajax-Instanziierung kann in fünf Punkte unterteilt werden, die leichter zu merken sind:

1. Neue XMLHttpRequest-Instanz Beachten Sie, dass sie mit niedrigeren Versionen von IE-Browsern kompatibel ist 

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

2. url,asyn) Die open()-Methode des XMLHttpRequest-Objekts verfügt über 3 Parameter. Der erste Parameter gibt an, ob es sich um GET oder POST handelt, der zweite Parameter gibt die URL-Adresse an und der dritte Parameter gibt an, ob sie verwendet werden soll asynchron. Der Standardwert ist „true“, daher ist „Write“ nicht erforderlich.

3* Wenn es sich um eine Post-Anfrage handelt, fügen Sie den Anforderungsheader setRequestHeader („Content-Type“, „application/x-www-form-urlencoded“) hinzu

4 , send
ruft die send()-Methode auf, um die Anfrage tatsächlich zu senden. Für GET-Anfragen sind keine Parameter erforderlich, und für POST-Anfragen muss der Textteil als Zeichenfolge oder FormData-Objekt übergeben werden.

5. onReadyStateChange

6. ResponseText

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

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

      xhr.open(&#39;GET&#39;,&#39;serverjson.php?number=&#39;+oKeyword.value);

      xhr.send();
      //当创建了XMLHttpRequest对象后，要先设置onreadystatechange的回调函数。在回调函数中，通常我们只需通过readyState === 4判断请求是否完成，如果已完成，再根据status === 200判断是否是一个成功的响应。
      xhr.onreadystatechange=function(){
        if(xhr.readyState==4){
          if(xhr.status=200){
            var data=JSON.parse(xhr.responseText); //json解析方法JSON.parse 或者 eval(&#39;(&#39;+xhr.responseText+&#39;)&#39;)
            oSearchRes.innerHTML=data.msg;
          }
        }
      }
    }

    // 增加员工    
    var oAddnumber=document.getElementById(&#39;add-number&#39;), //员工编号
      oAddname=document.getElementById(&#39;add-name&#39;), //员工姓名
      oAddsex=document.getElementById(&#39;add-sex&#39;), //员工性别
      oAddjob=document.getElementById(&#39;add-job&#39;), //员工职位
      oAddSearch=document.getElementById(&#39;add-search&#39;), //增加员工按钮
      oAddResult=document.getElementById(&#39;add-resultshow&#39;); //反馈结果显示

    // 增加员工按钮点击事件
    oAddSearch.onclick=function(){
      createStaff();
    }
    // 创建增加员工方法
    function createStaff(){

      var xhr;
      if(xhr.XMLHttpRequest){
        xhr = new XMLHttpRequest();
      }else{
        xhr = new ActiveXObject(&#39;Microsoft.XMLHTTP&#39;);
      }

      xhr.open(&#39;POST&#39;,&#39;serverjson.php&#39;);

      //这里注意key=value的等于号两边不要出现空格，会出现错误
      var data=&#39;name=&#39;+oAddname.value
      +&#39;&number=&#39;+oAddnumber.value
      +&#39;&sex=&#39;+oAddsex.value
      +&#39;&job=&#39;+oAddjob.value;

      //在open和send之间设置Content-Type
      xhr.setRequestHeader(&#39;Content-Type&#39;,&#39;application/x-www-form-urlencoded&#39;);

      xhr.send(data);

      xhr.onreadystatechange=function(){
        if(xhr.readyState==4){
          if(xhr.status=200){
            var data=JSON.parse(xhr.responseText);
            if(data.success){
              oAddResult.innerHTML=data.msg;              
            }else{
              oAddResult.innerHTML=&#39;出现错误：&#39;+data.msg;
            }
          }else{
            alert(&#39;发生错误！&#39;+xhr.status)
          }
        }
      }
    }

serverjson .php

<?php
//设置页面内容是html编码格式是utf-8
header("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 &#39;{"success":false,"msg":"参数错误"}&#39;;
    return;
  }
  //函数之外声明的变量拥有 Global 作用域，只能在函数以外进行访问。
  //global 关键词用于访问函数内的全局变量
  global $staff;
  //获取number参数
  $number = $_GET["number"];
  $result = &#39;{"success":false,"msg":"没有找到员工。"}&#39;;

  //遍历$staff多维数组，查找key值为number的员工是否存在，如果存在，则修改返回结果
  foreach ($staff as $value) {
    if ($value["number"] == $number) {
      $result = &#39;{"success":true,"msg":"找到员工：员工编号：&#39; . $value["number"] . 
              &#39;，员工姓名：&#39; . $value["name"] . 
              &#39;，员工性别：&#39; . $value["sex"] . 
              &#39;，员工职位：&#39; . $value["job"] . &#39;"}&#39;;
      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 &#39;{"success":false,"msg":"参数错误，员工信息填写不全"}&#39;;
    return;
  }
  //TODO: 获取POST表单数据并保存到数据库

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

?>

Zusammenfassung

Der gesamte Prozess ist ungefähr wie in der Abbildung dargestellt:

Das Obige ist das, was ich für alle zusammengestellt habe. Ich hoffe, dass es in Zukunft für alle hilfreich sein wird.

Verwandte Artikel:

Ajax-Implementierungscode für dreistufige Verknüpfung

Ajax-Implementierung der Ladedatenfunktion

So verwenden Sie ajax_Examples, Ajax-Datenverarbeitung

Das obige ist der detaillierte Inhalt vonjs kombiniert mit json, um ein einfaches Ajax-Beispiel zu implementieren. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Detaillierte Erläuterung der Schritte, die Vue zur Verwendung von vee-validate zur Überprüfung des Formulars benötigtNächster Artikel：Detaillierte Erläuterung der Schritte, die Vue zur Verwendung von vee-validate zur Überprüfung des Formulars benötigt

In Verbindung stehende Artikel

Mehr sehen