検索

ホームページ >ウェブフロントエンド >jsチュートリアル >JSON を使用した Ajax フロントエンドおよびバックエンド相互作用の実装方法

JSON を使用した Ajax フロントエンドおよびバックエンド相互作用の実装方法

小云云
小云云オリジナル
2018-01-22 13:16:422715ブラウズ

この記事では、JSON を使用した jQuery Ajax フロントエンドとバックエンドの対話の例を主に紹介します。フロントエンドは、jQuery Ajax を介して json をバックエンドに送信し、バックエンドは json を受信し、json を処理します。 end はフロントエンドに json を返します。興味があれば、さらに詳しく学ぶことができます。皆さんのお役に立てれば幸いです。

要件:

フロントエンドはjQuery Ajaxを通じてバックエンドにjsonを送信し、バックエンドはjsonを受信して​​処理し、バックエンドはフロントエンドにjsonを返します

サーブレットメソッドが使用されますこちら

1. $.postメソッドを使用します

index.jspページ


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<%@ page contentType="text/html; charset=UTF-8"%> 
<html> 
<head> 
<title></title> 
<script src="js/jquery-1.12.2.js"></script> 
<script language="JavaScript"> 
  function checkUserid() { 
    $.post(&#39;Ajax/CheckServlet&#39;,//url 
    { 
      userid : $("#userid").val(), 
      sex : "男" 
    }, function(data) { 
      var obj = eval(&#39;(&#39; + data + &#39;)&#39;); 
      alert(obj.success); 
    }); 
  } 
</script> 
</head> 
<body> 
  用户ID: 
  <input type="text" id="userid" name="userid"> <span id="msg"></span> 
  <br> <button onclick="checkUserid()">传输</button> 
</body> 
</html>

CheckServlet.Javaのコードは以下の通りです


package com.ajax; 
 
import java.io.IOException; 
import java.io.PrintWriter; 
 
import javax.servlet.ServletException; 
import javax.servlet.http.HttpServlet; 
import javax.servlet.http.HttpServletRequest; 
import javax.servlet.http.HttpServletResponse; 
 
public class CheckServlet extends HttpServlet { 
 
  public void doGet(HttpServletRequest request, HttpServletResponse response) 
      throws ServletException, IOException { 
    this.doPost(request, response); 
  } 
 
  public void doPost(HttpServletRequest request, HttpServletResponse response) 
      throws ServletException, IOException { 
    /*设置字符集为&#39;UTF-8&#39;*/ 
    request.setCharacterEncoding("UTF-8"); 
    response.setCharacterEncoding("UTF-8"); 
    String userid = request.getParameter("userid"); // 接收userid 
    String sex = request.getParameter("sex");//接收性别 
    System.out.println(userid); 
    System.out.println(sex); 
 
    //写返回的JSON 
    PrintWriter pw = response.getWriter(); 
    String json = "{&#39;success&#39;:&#39;成功&#39;,&#39;false&#39;:&#39;失败&#39;}"; 
    pw.print(json); 
    pw.flush(); 
    pw.close(); 
 
  } 
}

ここではサーブレットメソッドを使用するため、web.xmlの設定が必要です


<?xml version="1.0" encoding="UTF-8"?> 
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 
  xmlns="http://xmlns.jcp.org/xml/ns/javaee" 
  xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_3_1.xsd" 
  id="WebApp_ID" version="3.1"> 
  <display-name>Ajax</display-name> 
 
  <servlet> 
    <servlet-name>CheckServlet</servlet-name> 
    <servlet-class>com.ajax.CheckServlet</servlet-class> 
  </servlet> 
  <servlet-mapping> 
    <servlet-name>CheckServlet</servlet-name> 
    <url-pattern>/Ajax/CheckServlet</url-pattern> 
  </servlet-mapping> 
</web-app>

ページに ID を入力すると、バックグラウンドで PrintWriter を使用して JSON を書き戻し、フロントエンドで JSON を Object オブジェクトに変換します。 $.get メソッドを使用して、JSON 値を取得します。 $.get メソッドを使用して、JSP ページの post を get


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<%@ page contentType="text/html; charset=UTF-8"%> 
<html> 
<head> 
<title></title> 
<script src="js/jquery-1.12.2.js"></script> 
<script language="JavaScript"> 
  function checkUserid() { 
    $.get( 
      &#39;Ajax/CheckServlet&#39;,//url 
      { 
        userid:$("#userid").val(), 
        sex:"男" 
      }, 
      function(data){ 
        var obj = eval(&#39;(&#39;+data+&#39;)&#39;); 
        alert(obj.success); 
      } 
    ); 
  } 
</script> 
</head> 
<body> 
 
  用户ID: 
  <input type="text" id="userid" name="userid"> <span id="msg"></span> 
    <br> 
      <button onclick="checkUserid()">传输</button> 
</body> 
</html>

に変更するだけです。結果は $.post

と同じです。

3. $.ajax メソッドを通して

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<%@ page contentType="text/html; charset=UTF-8"%> 
<html> 
<head> 
<title></title> 
<script src="js/jquery-1.12.2.js"></script> 
<script language="JavaScript"> 
  function checkUserid() { 
    $.ajax({ 
      type : &#39;post&#39;, 
      data : { 
        userid : $("#userid").val(), 
        sex : "男" 
      }, 
      url : "Ajax/CheckServlet", 
      success : function(data) { 
        var obj = eval(&#39;(&#39; + data + &#39;)&#39;); 
      alert(obj.success); 
      }, 
      error : function() { 
      }, 
      complete : function() { 
      } 
    }); 
  } 
</script> 
</head> 
<body> 
 
  用户ID: 
  <input type="text" id="userid" name="userid"> <span id="msg"></span> 
    <br> 
      <button onclick="checkUserid()">传输</button> 
</body> 
</html>

$.ajax メソッドは post メソッドと get メソッドに分けることもでき、型を変更して送信メソッドを変更します


結果はメソッド 1 と同じです

関連するおすすめ:


JavaScriptでURLをjson形式に解析する2つの方法

jsonpの原理を完全マスター そして実装方法

JSはフォームフィールド内の複数のデータを取得してjson形式に変換します。共有例

以上がJSON を使用した Ajax フロントエンドおよびバックエンド相互作用の実装方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

Java JavaScript json jquery ajax servlet Object xml JS 对象
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
前の記事：ボタンをクリックして確認コードを送信すると、カウントダウンが表示されます。次の記事：ボタンをクリックして確認コードを送信すると、カウントダウンが表示されます。

関連記事

続きを見る