지역 사회 배우다 도구 라이브러리 여가
찾다
한국어
집 > 웹 프론트엔드 > JS 튜토리얼 > 본문

Ajax는 JSON 예제 코드를 전달합니다.

亚连
풀어 주다： 2018-05-22 16:35:14
원래의
1770명이 탐색했습니다.

ajax의 전체 이름은 비동기식 javascript 및 XML이지만. 그러나 현재 Ajax 기술을 사용하는 경우 JSON을 전달하는 것이 사실상의 표준이 되었습니다. 이번 글에서는 Ajax 전달 JSON 예제 코드를 주로 소개합니다. 필요한 친구들은 앞의 말을 참고하시면 됩니다

ajax의 정식 이름은 비동기식 자바스크립트와 XML입니다. 그러나 현재 Ajax 기술을 사용하는 경우 JSON을 전달하는 것이 사실상의 표준이 되었습니다. XML에 비해 JSON은 간단하고 편리하기 때문입니다. 이번 글은 JSON 형식으로 데이터를 전송하기 위해 이전 글의 예시를 다시 작성했습니다

프런트엔드 페이지

<!-- 前端页面 -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
body{font-size: 20px;margin: 0;line-height: 1.5;}
select,button,input{font-size: 20px;line-height: 1.5;}
</style>
</head>
<body>
<h2>员工查询</h2>  
<label>请输入员工编号:</label>
<input type="text" id="keyword">
<button id="search">查询</button>
<p id="searchResult"></p>
<h2>员工创建</h2>
<form id="postForm">
  <label>请输入员工姓名：</label>
  <input type="text" name="name"><br>
  <label>请输入员工编号：</label>
  <input type="text" name="number"><br>
  <label>请输入员工性别：</label>
  <select name="sex">
  <option value="男">男</option>
  <option value="女">女</option>
  </select><br>
  <label>请输入员工职位：</label>
  <input type="text" name="job"><br>
  <button id="save" type="button">保存</button>  
</form>
<p id="createResult"></p>
<script>
/*get*/
//查询
var oSearch = document.getElementById(&#39;search&#39;);
//get方式添加数据
function addURLParam(url,name,value){
  url += (url.indexOf("?") == -1 ? "?" : "&");
  url +=encodeURIComponent(name) + "=" + encodeURIComponent(value);
  return url;
}
oSearch.onclick = function(){
  //创建xhr对象
  var xhr;
  if(window.XMLHttpRequest){
    xhr = new XMLHttpRequest();
  }else{
    xhr = new ActiveXObject(&#39;Microsoft.XMLHTTP&#39;);
  }
  //异步接受响应
  xhr.onreadystatechange = function(){
    if(xhr.readyState == 4){
      if(xhr.status == 200){
        //实际操作
        var data = JSON.parse(xhr.responseText);
        if(data.success){
          document.getElementById(&#39;searchResult&#39;).innerHTML = data.msg;
        }else{
          document.getElementById(&#39;searchResult&#39;).innerHTML = &#39;出现错误：&#39; +data.msg;
        }
      }else{
        alert(&#39;发生错误：&#39; + xhr.status);
      }
    }
  }
  //发送请求
  var url = &#39;service.php&#39;;
  url = addURLParam(url,&#39;number&#39;,document.getElementById(&#39;keyword&#39;).value);
  xhr.open(&#39;get&#39;,url,true);
  xhr.send();
}
/*post*/
//创建
var oSave = document.getElementById(&#39;save&#39;);
//post方式添加数据
function serialize(form){    
  var parts = [],field = null,i,len,j,optLen,option,optValue;
  for (i=0, len=form.elements.length; i < len; i++){
    field = form.elements[i];
    switch(field.type){
      case "select-one":
      case "select-multiple":
        if (field.name.length){
          for (j=0, optLen = field.options.length; j < optLen; j++){
            option = field.options[j];
            if (option.selected){
              optValue = "";
              if (option.hasAttribute){
                optValue = (option.hasAttribute("value") ? option.value : option.text);
              } else {
                optValue = (option.attributes["value"].specified ? option.value : option.text);
              }
              parts.push(encodeURIComponent(field.name) + "=" + encodeURIComponent(optValue));
            }
          }
        }
        break;       
      case undefined:   //fieldset
      case "file":    //file input
      case "submit":   //submit button
      case "reset":    //reset button
      case "button":   //custom button
        break;        
      case "radio":    //radio button
      case "checkbox":  //checkbox
        if (!field.checked){
          break;
        }
        /* falls through */
      default:
        //don&#39;t include form fields without names
        if (field.name.length){
          parts.push(encodeURIComponent(field.name) + "=" + encodeURIComponent(field.value));
        }
    }
  }    
  return parts.join("&");
}
oSave.onclick = function(){
  //创建xhr对象
  var xhr;
  if(window.XMLHttpRequest){
    xhr = new XMLHttpRequest();
  }else{
    xhr = new ActiveXObject(&#39;Microsoft.XMLHTTP&#39;);
  }
  //异步接受响应
  xhr.onreadystatechange = function(){
    if(xhr.readyState == 4){
      if(xhr.status == 200){
        //实际操作
        var data = JSON.parse(xhr.responseText);
        if(data.success){
         document.getElementById(&#39;createResult&#39;).innerHTML = data.msg; 
       }else{
         document.getElementById(&#39;createResult&#39;).innerHTML = &#39;出现错误：&#39;+data.msg;
       }
      }else{
        alert(&#39;发生错误：&#39; + xhr.status);
      }
    }
  }
  //发送请求
  xhr.open(&#39;post&#39;,&#39;service.php&#39;,true);
  xhr.setRequestHeader("content-type","application/x-www-form-urlencoded");
  xhr.send(serialize(document.getElementById(&#39;postForm&#39;)));
}
</script>
</body>
</html>
로그인 후 복사
백엔드 페이지

<?php 
//用于过滤不安全的字符
function test_input($data) {
  $data = trim($data);
  $data = stripslashes($data);
  $data = htmlspecialchars($data);
  return $data;
}
//设置页面内容的html编码格式是utf-8
header("Content-Type:application/json;charset=utf-8");
//定义一个多维数组，包含员工的信息，每条员工信息为一个数组
$staff = array(
  array("name"=>"洪七","number"=>"101","sex"=>"男","job"=>&#39;总经理&#39;),
  array("name"=>"郭靖","number"=>"102","sex"=>"男","job"=>&#39;开发工程师&#39;),
  array("name"=>"黄蓉","number"=>"103","sex"=>"女","job"=>&#39;产品经理&#39;)
  );
//判断如果是get请求，则进行搜索；如果是POST请求，则进行新建
//$_SERVER["REQUEST_METHOD"]返回访问页面使用的请求方法
if($_SERVER["REQUEST_METHOD"] == "GET"){
  search();
}else if($_SERVER["REQUEST_METHOD"] == "POST"){
  create();
}
//通过员工编号搜索员工
function search(){
  //检查是否有员工编号的参数
  //isset检测变量是否设置；empty判断值是否为空
  if(!isset($_GET[&#39;number&#39;]) || empty($_GET[&#39;number&#39;])){
    echo &#39;{"success":false,"msg":"参数错误"}&#39;;
    return;
  }
  global $staff;
  $number = test_input($_GET[&#39;number&#39;]);
  $result = &#39;{"success":false,"msg":"没有找到员工"}&#39;;
  //遍历$staff多维数组，查找key值为number的员工是否存在。如果存在，则修改返回结果
  foreach($staff as $value){
    if($value[&#39;number&#39;] == $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[&#39;name&#39;]) || empty($_POST[&#39;name&#39;]) || 
    !isset($_POST[&#39;number&#39;]) || empty($_POST[&#39;number&#39;]) ||
    !isset($_POST[&#39;sex&#39;]) || empty($_POST[&#39;sex&#39;]) ||
    !isset($_POST[&#39;job&#39;]) || empty($_POST[&#39;job&#39;]) 
    ){
    echo &#39;{"success":false,"msg":"参数错误，员工信息填写不全"}&#39;;
    return;
  }
  echo &#39;{"success":true,"msg":"员工&#39; .test_input($_POST[&#39;name&#39;]) .&#39;信息保存成功!"}&#39;;
}
?>
로그인 후 복사

예시 데모

위 내용은 다음과 같습니다. 여러분을 모아봤습니다. 앞으로 모든 분들께 도움이 되길 바랍니다.

관련 기사:

Ajax 특성과 잘못된 코드 문제(그림 및 텍스트 튜토리얼)

formData Ajax 기반 이미지 및 데이터 업로드

Ajax 비동기 요청 기술 예시 설명

위 내용은 Ajax는 JSON 예제 코드를 전달합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨：
ajax javascript json
원천：php.cn
이전 기사：ajax는 json을 사용하여 데이터 전송을 실현합니다. 다음 기사：Promise를 사용하여 여러 비동기 Ajax 요청으로 인한 코드 중첩 문제 해결
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
최신 이슈
JavaScript를 사용하지 않고 클릭 시 이미지 소스를 동적으로 수정하는 CSS 전용 방법 img:active와 같은 CSS만 사용하여 마우스 클릭 시 이미지의 소스를 변경해야 합니다.{}
에서 2024-04-06 19:25:49
0
1
505
d3.js를 확대할 때 산점도 값이 유지되지 않습니다. d3.js를 처음 사용하는 것이므로 양해해 주시기 바랍니다. vue.js 파일에 순수 JavaScript로 구현했습니다. 확대/축소 기능을 사용하여 산점도를 만들...
에서 2024-04-06 18:16:26
0
1
403
공급업체별 의사 요소에 대한 JavaScript 호버 이벤트 나는 아래에 HTMLinput标签。$("input[type='range']::-webkit-slider-thumb").on('hover',fun...
에서 2024-04-06 15:35:24
0
1
274
Javascript/Jquery를 사용하여 버튼 없이 양식 제출 JavaScript 함수를 호출하고 JQUERY/PHP를 사용하여 양식을 실행하여 버튼 없이 양식을 제출하려고 합니다. 페이지를 다시 로드하지 않고 백엔드에서 양...
에서 2024-04-06 14:54:03
0
2
421
CollapseDisplay 클래스를 사용하여 Bootstrap 아코디언 헤더의 모양을 사용자 정의하세요. 클래스 Collapseshow를 사용하여 패널의 카드 제목 스타일을 지정하고 싶습니다. 이 예에서는 첫 번째 패널입니다. CSS를 사용하여 .accordion.c...
에서 2024-04-06 12:53:11
0
1
376
관련 주제
더>
인기 추천
인기 튜토리얼
더>
관련 튜토리얼
인기 추천
최신 강좌
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿