Detaillierte Erläuterung der Schritte zur Übertragung von Json- und XML-Daten über Ajax (mit Code)-js-Tutorial-php.cn

Heim

Web-Frontend

js-Tutorial

Detaillierte Erläuterung der Schritte zur Übertragung von Json- und XML-Daten über Ajax (mit Code)

php中世界最好的语言

Apr 03, 2018 pm 03:13 PM

ajax javascript json

Dieses Mal erkläre ich Ihnen Schritt für Schritt die Ajax-Übertragung von Json- und XML-Daten (mit Code). Werfen wir einen Blick darauf.

Ajax überträgt XML-Daten:

Solange die Daten im XML-Format gekapselt sind, kann die Übertragung realisiert werden. Das Front-End-JS verwendet ResponseXML, um XML-Parameter zu empfangen und den Hintergrund zu lesen verwendet Streams und dom4j zum Parsen von Startseite

Backend-Seite

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Ajax XML数据处理演示</title>
<script type="text/javascript">
  //get方式ajax
  function send1(){
   alert("ok");
   var name=document.getElementsByName("name")[0].value;
   var age=document.getElementsByName("age")[0].value;
   var xhr=null;
   if(window.XMLHttpRequest){
    xhr=new XMLHttpRequest();
   }else{
    xhr=new ActiveXObject("Microsoft.XMLHttp");
   }
   var url="<c:url value=&#39;/XmlServlet?name=&#39;/>"+name+"&age="+age;
   //3设置访问方式
   xhr.open("GET", url, true);
   //4设置访问成功返回后的操作
   xhr.onreadystatechange=function(){
    if(xhr.readyState==4){//返回
     if(xhr.status==200){//响应代码正常
      var txt=xhr.responseText;
      alert(txt);
     }
    }
   };
   xhr.send(null);
  }
 </script>
<!-- 前台以xml的格式向服务器发送数据 -->
<script type="text/javascript">
  //post方式ajax
  function send2(){
   alert("222");
   //1创建ajax对象
   var xhr = null;
   if(window.XMLHttpRequest){//高版本
    xhr = new XMLHttpRequest();
   }else{//低版本
    xhr = new ActiveXObject("Microsoft.XMLHttp");
   }
   //2请求地址
   var url = "<c:url value=&#39;/XmlServlet&#39;/>";
   //3设置访问方式
   xhr.open("POST", url, true);
   //4设置访问成功返回后的操作
   xhr.onreadystatechange=function(){
    if(xhr.readyState==4){//返回
     if(xhr.status==200){//响应代码正常
      var xmlObj=xhr.responseXML;
      var users=xmlObj.getElementsByTagName("user");
      for(var i=0;i<users.length;i++){
       var id=users[i].getAttribute("id");
       var name=users[i].childNodes[0].firstChild.data;//xml中的dom模型中的操作方法，和html中有点小差别
       var age=users[i].childNodes[1].firstChild.data;//不能用childNodes["age"]
       alert(id+","+name+","+age);
      }
     }
    }
   };
   var name=document.getElementsByName("name")[0].value;
   var age=document.getElementsByName("age")[0].value;
   var xml="<user><name>"+name+"</name><age>"+age+"</age></user>";
   xhr.send(xml);
  }
 </script>
</head>
<body>
 Name:
 <input type="text" name="name">
 <br /> Age:
 <input type="text" name="age">
 <br />
 <input type="button" value="Get提交" onclick="send1();" />
 <br />
 <input type="button" value="Post提交" onclick="send2()" />
 <br />
</body>
</html>

Nach dem Login kopieren

---------------- ---------- -------------------------- ---------- ----

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Ajax XML数据处理演示</title>
<script type="text/javascript">
  //get方式ajax
  function send1(){
   alert("ok");
   var name=document.getElementsByName("name")[0].value;
   var age=document.getElementsByName("age")[0].value;
   var xhr=null;
   if(window.XMLHttpRequest){
    xhr=new XMLHttpRequest();
   }else{
    xhr=new ActiveXObject("Microsoft.XMLHttp");
   }
   var url="<c:url value=&#39;/XmlServlet?name=&#39;/>"+name+"&age="+age;
   //3设置访问方式
   xhr.open("GET", url, true);
   //4设置访问成功返回后的操作
   xhr.onreadystatechange=function(){
    if(xhr.readyState==4){//返回
     if(xhr.status==200){//响应代码正常
      var txt=xhr.responseText;
      alert(txt);
     }
    }
   };
   xhr.send(null);
  }
 </script>
<!-- 前台以xml的格式向服务器发送数据 -->
<script type="text/javascript">
  //post方式ajax
  function send2(){
   alert("222");
   //1创建ajax对象
   var xhr = null;
   if(window.XMLHttpRequest){//高版本
    xhr = new XMLHttpRequest();
   }else{//低版本
    xhr = new ActiveXObject("Microsoft.XMLHttp");
   }
   //2请求地址
   var url = "<c:url value=&#39;/XmlServlet&#39;/>";
   //3设置访问方式
   xhr.open("POST", url, true);
   //4设置访问成功返回后的操作
   xhr.onreadystatechange=function(){
    if(xhr.readyState==4){//返回
     if(xhr.status==200){//响应代码正常
      var xmlObj=xhr.responseXML;
      var users=xmlObj.getElementsByTagName("user");
      for(var i=0;i<users.length;i++){
       var id=users[i].getAttribute("id");
       var name=users[i].childNodes[0].firstChild.data;//xml中的dom模型中的操作方法，和html中有点小差别
       var age=users[i].childNodes[1].firstChild.data;//不能用childNodes["age"]
       alert(id+","+name+","+age);
      }
     }
    }
   };
   var name=document.getElementsByName("name")[0].value;
   var age=document.getElementsByName("age")[0].value;
   var xml="<user><name>"+name+"</name><age>"+age+"</age></user>";
   xhr.send(xml);
  }
 </script>
</head>
<body>
 Name:
 <input type="text" name="name">
 <br /> Age:
 <input type="text" name="age">
 <br />
 <input type="button" value="Get提交" onclick="send1();" />
 <br />
 <input type="button" value="Post提交" onclick="send2()" />
 <br />
</body>
</html>

Nach dem Login kopieren

Die Hauptpunkte der Ajax-Übertragung von Json-Daten

Verwenden Sie die JSONArray-Klasse von Apache oder Alibaba für die ÜbertragungFront-End-Code

JsonServlet1.java

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Ajax Json数据处理演示</title>
<script type="text/javascript">
 function ask1() {
  //1创建ajax对象
  var xhr = null;
  if (window.XMLHttpRequest) {//高版本
   xhr = new XMLHttpRequest();
  } else {//低版本
   xhr = new ActiveXObject("Microsoft.XMLHttp");
  }
  //2请求地址
  var url = "<c:url value=&#39;/JsonServlet1&#39;/>";
  //3设置访问方式
  xhr.open("POST", url, true);
  //4设置访问成功返回后的操作
  xhr.onreadystatechange = function() {
   if (xhr.readyState == 4) {//返回
    if (xhr.status == 200) {//响应代码正常
     //※※※※※解析后台返回的json串
     //js中eval()方法的功能：是校验参数文本串符合js中哪一种数据类型，并把其转换成对应类型的对象
     var txt = xhr.responseText;
     var users = eval("(" + txt + ")"); //把符合json格式的文本串 转换成 json对象
     for ( var i = 0; i < users.length; i++) {
      alert(users[i].id + "," + users[i].name + ","
        + users[i].age);
     }
    }
   }
  };
  //5 发送
  xhr.send(null);
 }
 function ask2() {
  //1创建ajax对象
  var xhr = null;
  if (window.XMLHttpRequest) {//高版本
   xhr = new XMLHttpRequest();
  } else {//低版本
   xhr = new ActiveXObject("Microsoft.XMLHttp");
  }
  //2请求地址
  var url = "<c:url value=&#39;/JsonServlet2&#39;/>";
  //3设置访问方式
  xhr.open("POST", url, true);
  //4设置访问成功返回后的操作
  xhr.onreadystatechange = function() {
   if (xhr.readyState == 4) {//返回
    if (xhr.status == 200) {//响应代码正常
     //※※※※※解析后台返回的json串
     //js中eval()方法的功能：是校验参数文本串符合js中哪一种数据类型，并把其转换成对应类型的对象
     var txt = xhr.responseText;
     //alert(txt);
     //把符合json格式的文本串 转换成 json对象
     var users = eval("(" + txt + ")"); 
     for ( var key in users)//map的便利方式
      alert("属性：" + key + ",值：" + users[key]);
     }
     //for ( var i = 0; i < users.length; i++) {//list的遍历方式
      //alert(users[i].id +","+users[i].name+","+users[i].age);
     //}
   };
  };
  //5 发送
  xhr.send(null);
 }
 function ask3() {
  //1创建ajax对象
  var xhr = null;
  if (window.XMLHttpRequest) {//高版本
   xhr = new XMLHttpRequest();
  } else {//低版本
   xhr = new ActiveXObject("Microsoft.XMLHttp");
  }
  //2请求地址
  var url = "<c:url value=&#39;/JsonServlet2&#39;/>";
  //3设置访问方式
  xhr.open("POST", url, true);
  //4设置访问成功返回后的操作
  xhr.onreadystatechange = function() {
   if (xhr.readyState == 4) {//返回
    if (xhr.status == 200) {//响应代码正常
     //※※※※※解析后台返回的json串
     //js中eval()方法的功能：是校验参数文本串符合js中哪一种数据类型，并把其转换成对应类型的对象
     var txt = xhr.responseText;
     //alert(txt);
     //把符合json格式的文本串 转换成 json对象
     var users = eval("(" + txt + ")"); 
     for ( var key in users)//map的便利方式
      alert("属性：" + key + ",值：" + users[key]);
     }
     //for ( var i = 0; i < users.length; i++) {//list的遍历方式
      //alert(users[i].id +","+users[i].name+","+users[i].age);
     //}
   };
  };
  //5 发送
  xhr.send(null);
 }
</script>
</head>
<body>
 <input type="button" onclick="ask1();" value="ajax请求后台数据(手动封装json方式)" />
 <br />
 <input type="button" onclick="ask2();"
  value="ajax请求后台数据(用apache工具封装json方式)" />
 <input type="button" onclick="ask3()" value="ajax请求后台数据(用fastjson工具封装json方式)" />
</body>
</html>

Nach dem Login kopieren

JsonServlet2.java

package cn.hncu.servlet;
import java.io.IOException;
import java.io.PrintWriter;
import java.util.ArrayList;
import java.util.List;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import cn.hncu.domain.User;
public class JsonServlet1 extends HttpServlet {
 public void doGet(HttpServletRequest request, HttpServletResponse response)
   throws ServletException, IOException {
  doPost(request, response);
 }
 public void doPost(HttpServletRequest request, HttpServletResponse response)
   throws ServletException, IOException {
  //调用后台service.dao.query()，到数据库当中把信息读取出来
  //为简化知识点的理解，此处后台部分的功能直接模拟
  response.setContentType("text/html;charset=utf-8");
  PrintWriter out = response.getWriter();
  List<User> users = new ArrayList<User>();
  users.add(new User("A001","Jack",20));
  users.add(new User("A002","Rose",22));
  users.add(new User("B001","张三",20));
  users.add(new User("B002","李四",30));
  String json="";
  //用java封装出json格式的字符串：[{name:"Jack",age:25}, {...}, {...} ]
  for(User u:users){
   if(json.equals("")){
    json="{name:\""+u.getName()+"\",id:\""+u.getId()+"\",age:"+u.getAge()+"}";
   }else{
    json = json +",{ name:\""+u.getName()+"\",id:\""+u.getId()+"\",age:"+u.getAge()+"}" ;
   }
  }
  json="["+json+"]";
  out.print(json);
 }
}

Nach dem Login kopieren

JsonServlet3.java

package cn.hncu.servlet;
import java.io.IOException;
import java.io.PrintWriter;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import cn.hncu.domain.User;
import net.sf.json.JSONArray;
import net.sf.json.JSONObject;
public class JsonServlet2 extends HttpServlet {
 public void doPost(HttpServletRequest request, HttpServletResponse response)
   throws ServletException, IOException {
  response.setContentType("text/html;charset=utf-8");
  PrintWriter out = response.getWriter();
  List<User> users = new ArrayList<User>();
  users.add(new User("A001","Jack",20));
  users.add(new User("A002","Rose",22));
  users.add(new User("B001","张三",20));
  users.add(new User("B002","李四",30));
  String strJson=com.alibaba.fastjson.JSONArray.toJSONString(users);
  System.out.println(strJson);
  //用fastjson工具(只有一个jar包)帮我们把list转换成json串
  Map<String, Object> map = new HashMap<String, Object>();
  map.put("addr", "湖南");
  map.put("height", "170");
  map.put("marry", "no");
  map.put("user", new User("A003","小李",25));
  String strMap=com.alibaba.fastjson.JSONArray.toJSONString(map);
  out.print(strMap.toString());
 }
}

Nach dem Login kopieren

Ich glaube, Sie haben es gemeistert Die Methode nach dem Lesen des Falls in diesem Artikel finden Sie unter PHP Chinesisch Weitere verwandte Artikel online!

package cn.hncu.servlet;
import java.io.IOException;
import java.io.PrintWriter;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import net.sf.json.JSONArray;
import net.sf.json.JSONObject;
import cn.hncu.domain.User;
public class JsonServlet3 extends HttpServlet {
 public void doPost(HttpServletRequest request, HttpServletResponse response)
   throws ServletException, IOException {
  response.setContentType("text/html;charset=utf-8");
  PrintWriter out = response.getWriter();
  List<User> users = new ArrayList<User>();
  users.add(new User("A001","Jack",20));
  users.add(new User("A002","Rose",22));
  users.add(new User("B001","张三",20));
  users.add(new User("B002","李四",30));
  //用fastjson工具(只有一个jar包)帮我们把list转换成json串
  JSONArray json=JSONArray.fromObject(users);
  String strJson=json.toString();
  System.out.println(strJson);
  Map<String, Object> map = new HashMap<String, Object>();
  map.put("addr", "湖南");
  map.put("height", "170");
  map.put("marry", "no");
  map.put("user", new User("A003","小李",25));
  JSONObject obj = JSONObject.fromObject(map);
  System.out.println(obj.toString());
  out.print(obj.toString());
 }
}

Nach dem Login kopieren

Empfohlene Lektüre:

Wie sendet Ajax ein Formular und implementiert den Datei-Upload?

Ajax überträgt Daten im JSON-Format an die Hintergrund. Wie man mit Fehlern umgeht

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der Schritte zur Übertragung von Json- und XML-Daten über Ajax (mit Code). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Erklärung dieser Website

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

Heiße KI -Werkzeuge

Undresser.AI Undress

KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover

Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

Undress AI Tool

Ausziehbilder kostenlos

Clothoff.io

KI-Kleiderentferner

AI Hentai Generator

Erstellen Sie kostenlos Ai Hentai.

Heißer Artikel

R.E.P.O. Energiekristalle erklärten und was sie tun (gelber Kristall)

3 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌

R.E.P.O. Beste grafische Einstellungen

3 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌

Assassin's Creed Shadows: Seashell Riddle -Lösung

1 Wochen vor By DDD

R.E.P.O. So reparieren Sie Audio, wenn Sie niemanden hören können

3 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌

Wo kann man die Kransteuerungsschlüsselkarten in Atomfall finden

1 Wochen vor By DDD

Heiße Werkzeuge

Notepad++7.3.1

Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version

Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1

Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6

Visuelle Webentwicklungstools

SublimeText3 Mac-Version

Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

Heiße Themen

Wo ist der Login-Zugang für Gmail-E-Mail?

7444

CakePHP-Tutorial

1371

Wie lautet das Format des Kontonamens von Steam?

Win11 -Aktivierungsschlüssel dauerhaft

NYT -Verbindungen Hinweise und Antworten

Related knowledge

Tipps zur Leistungsoptimierung für die Konvertierung von PHP-Arrays in JSON May 04, 2024 pm 06:15 PM

Zu den Leistungsoptimierungsmethoden für die Konvertierung von PHP-Arrays in JSON gehören: Verwendung von JSON-Erweiterungen und der Funktion json_encode(); Verwendung von Puffern zur Verbesserung der Leistung der Schleifencodierung; JSON-Codierungsbibliothek.

Wie steuern Anmerkungen in der Jackson-Bibliothek die JSON-Serialisierung und -Deserialisierung? May 06, 2024 pm 10:09 PM

Anmerkungen in der Jackson-Bibliothek steuern die JSON-Serialisierung und -Deserialisierung: Serialisierung: @JsonIgnore: Ignorieren Sie die Eigenschaft @JsonProperty: Geben Sie den Namen an @JsonGetter: Verwenden Sie die get-Methode @JsonSetter: Verwenden Sie die set-Methode Deserialisierung: @JsonIgnoreProperties: Ignorieren Sie die Eigenschaft @ JsonProperty: Geben Sie den Namen @JsonCreator an: Verwenden Sie den Konstruktor @JsonDeserialize: Benutzerdefinierte Logik

Wie erhalte ich Variablen aus der PHP-Methode mit Ajax? Mar 09, 2024 pm 05:36 PM

Die Verwendung von Ajax zum Abrufen von Variablen aus PHP-Methoden ist ein häufiges Szenario in der Webentwicklung. Durch Ajax kann die Seite dynamisch abgerufen werden, ohne dass die Daten aktualisiert werden müssen. In diesem Artikel stellen wir vor, wie man Ajax verwendet, um Variablen aus PHP-Methoden abzurufen, und stellen spezifische Codebeispiele bereit. Zuerst müssen wir eine PHP-Datei schreiben, um die Ajax-Anfrage zu verarbeiten und die erforderlichen Variablen zurückzugeben. Hier ist ein Beispielcode für eine einfache PHP-Datei getData.php:

PHP und Ajax: Erstellen einer Autovervollständigungs-Vorschlags-Engine Jun 02, 2024 pm 08:39 PM

Erstellen Sie eine Engine für Autovervollständigungsvorschläge mit PHP und Ajax: Serverseitiges Skript: Verarbeitet Ajax-Anfragen und gibt Vorschläge zurück (autocomplete.php). Client-Skript: Ajax-Anfrage senden und Vorschläge anzeigen (autocomplete.js). Praktischer Fall: Fügen Sie ein Skript in die HTML-Seite ein und geben Sie die Kennung des Sucheingabeelements an.

Vertiefendes Verständnis von PHP: Implementierungsmethode zur Konvertierung von JSON Unicode in Chinesisch Mar 05, 2024 pm 02:48 PM

Vertiefendes Verständnis von PHP: Implementierungsmethode zum Konvertieren von JSONUnicode in Chinesisch Während der Entwicklung stoßen wir häufig auf Situationen, in denen wir JSON-Daten verarbeiten müssen, und die Unicode-Codierung in JSON verursacht in einigen Szenarien einige Probleme, insbesondere wenn Unicode konvertiert werden muss Bei der Kodierung wird in chinesische Zeichen konvertiert. In PHP gibt es einige Methoden, die uns bei der Umsetzung dieses Konvertierungsprozesses helfen können. Im Folgenden wird eine allgemeine Methode vorgestellt und es werden spezifische Codebeispiele bereitgestellt. Lassen Sie uns zunächst das Un in JSON verstehen

PHP vs. Ajax: Lösungen zum Erstellen dynamisch geladener Inhalte Jun 06, 2024 pm 01:12 PM

Ajax (Asynchronous JavaScript and XML) ermöglicht das Hinzufügen dynamischer Inhalte, ohne die Seite neu laden zu müssen. Mit PHP und Ajax können Sie eine Produktliste dynamisch laden: HTML erstellt eine Seite mit einem Containerelement und die Ajax-Anfrage fügt die Daten nach dem Laden zum Element hinzu. JavaScript verwendet Ajax, um über XMLHttpRequest eine Anfrage an den Server zu senden, um Produktdaten im JSON-Format vom Server abzurufen. PHP nutzt MySQL, um Produktdaten aus der Datenbank abzufragen und in das JSON-Format zu kodieren. JavaScript analysiert die JSON-Daten und zeigt sie im Seitencontainer an. Durch Klicken auf die Schaltfläche wird eine Ajax-Anfrage zum Laden der Produktliste ausgelöst.

PHP-Tutorial: So konvertieren Sie JSON-Unicode in chinesische Zeichen Mar 05, 2024 pm 06:36 PM

JSON (JavaScriptObjectNotation) ist ein leichtes Datenaustauschformat, das häufig für den Datenaustausch zwischen Webanwendungen verwendet wird. Bei der Verarbeitung von JSON-Daten stoßen wir häufig auf Unicode-codierte chinesische Zeichen (z. B. „u4e2du6587“) und müssen diese in lesbare chinesische Zeichen konvertieren. In PHP können wir diese Konvertierung durch einige einfache Methoden erreichen. Als Nächstes erfahren Sie, wie Sie JSONUnico konvertieren

Schnelle Tipps zum Konvertieren von PHP-Arrays in JSON May 03, 2024 pm 06:33 PM

PHP-Arrays können über die Funktion json_encode() in JSON-Strings konvertiert werden (zum Beispiel: $json=json_encode($array);) und umgekehrt kann die Funktion json_decode() zum Konvertieren von JSON in Arrays ($array=) verwendet werden json_decode($json);) . Weitere Tipps sind die Vermeidung tiefgreifender Konvertierungen, die Angabe benutzerdefinierter Optionen und die Verwendung von Bibliotheken von Drittanbietern.

See all articles