Heim > Web-Frontend > js-Tutorial > Hauptteil

Details zur Ajax-Konfiguration, Erklärung des Ajax-Aufrufs, verstümmelte chinesische Ajax-Zeichen und Übermittlung von Ajax-Formularen (mit Beispielen)

寻∝梦
Freigeben: 2018-09-10 11:28:45
Original
1228 Leute haben es durchsucht

In diesem Artikel geht es hauptsächlich um die Zusammenfassung der Verwendung von Ajax sowie um detaillierte Erläuterungen zur Ajax-Konfiguration, zum Aufruf, zu verstümmelten chinesischen Zeichen, zur Formularübermittlung usw. Schauen wir uns nun gemeinsam diesen Artikel an

·Die Verwendung von jquery
0. jquery.js muss zuerst eingeführt werden, sonst kann das Jquery-Framework nicht aufgerufen werden
1. js unterscheidet zwischen Groß- und Kleinschreibung, bitte achten Sie darauf, wann Benennung
2. jquery ruft den Wert des Seitentexts basierend auf dem id-Attribut von p: $("#demoID").val() ab und ruft den Wert des Seitentexts basierend auf dem Klassenattribut $(" ab .demoCLASS").val(), wenn es sich um eine Zuweisung handelt $(" #demoID").val("Zugewiesene Parameter")
3. $(document).ready(function(){code}), $ ().ready(function(){code}), $(function (){code}) haben die gleiche Bedeutung
4. Mehrere $(function(){code}) können nebeneinander existieren, das heißt, sie können funktionieren gleichzeitig, solange sich die Namen nicht wiederholen
5. $(function(){code} ) bedeutet, dass es ausgeführt wird, sobald die Seite geladen wird, z. B. automatischer Klick, automatisches Popup oder Klicküberwachung oder andere Überwachung
6. Der Unterschied zwischen Klicken nach dem Laden und „Klicküberwachung“ (sehr nützlich als Referenz)
Beispielsweise gibt es jetzt eine js-Methode, Funktion demoFunction(){alert("Diese Methode wird ausgeführt" );};
Klicken Sie nach dem Laden: $("#demoid").click(demoFunction());
Nach dem Laden abhören. Diese Methode kann nur verwendet werden, wenn die Schaltfläche über eine Klickaktion oder über einen JQuery-Klick verfügt () action: $("#demoid").click(function(){demoFunction()});
7. Wenn es automatisch geladen und ausgeführt wird oder überwacht werden muss, muss es in der platziert werden Code von $(document).ready(function(){code})
8. window.onload=function(){ Der Unterschied zwischen code} und $(function(){code})
·Die Verwendung der Aufruf von Funktionen ist unterschiedlich:
window.onload = function(){code};
$(function(){code})
·Die Zeit zum Aufrufen der Funktion ist unterschiedlich
Window.load =function(){code}: Sie müssen warten, bis der gesamte Inhalt der Webseite geladen ist (einschließlich Bilder), bevor er ausgeführt werden kann, z. B. Hochladen und andere Funktionen.
$(function(){code}), kann ausgeführt werden, nachdem alle DOM-Strukturen auf der Webseite gezeichnet wurden.
9. AJAX-Thema
·Erforderliche JAR-Pakete: commons-lang-2.5.jar, commons-lang3-3.1.jar, javassist-3.11.0.GA.jar
·Wie man ein Frontend schreibt js: Um den Prozess zu vereinfachen, schreiben Sie die zu ladende Seite und führen Sie
$(document).ready(function(){
$.ajax({

url : "testajax.do",// 请求地址
//timeout : 600000,//超时时间设置,单位毫秒
async : false,// 异步
cache : false,// 缓存
type : 'post',// 请求方式
data: {"name":"123"},//data: $('#formid').serialize(),//序列化表单-当触发一个form表单提交的ajax事件的时候,这个序列化方法自动将数据转化为json格式传递给后台
dataType : 'json',// 服务器返回的数据类型
success : function(msg) {// 请求成功后调用的
alert("返回json的实验成功了"+" msg.resultcode="+msg.resultcode+" msg.name="+msg.name);
},
error :function(){
alert("异常");
}
});
      });
Nach dem Login kopieren

·Wie um die struts.xml-Datei zu schreiben

      <?xml version="1.0" encoding="UTF-8"?>
      <!DOCTYPE struts PUBLIC
    "-//Apache Software Foundation//DTD Struts Configuration 2.3//EN"
    "http://struts.apache.org/dtds/struts-2.3.dtd">
    <struts>
    <!--略去一些struts2的配置信息-->
<package name="myajax" extends="json-default" namespace="/">
<global-results>
<result name="message" type="json">
<param name="root">message</param>
</result>
</global-results>
<action name="*" class="demo.action.AjaxTest" method="{1}">
        <result name="list">/index.jsp</result>
       </action>
</package> 
<!-- 包含的其他配置文件 -->
<include file="struts-method.xml"></include>
    </struts>
Nach dem Login kopieren

·Backend-Java-Code: ruft nur Ajax auf, daher sind keine Datenbankoperationen erforderlich

    import java.io.IOException;
    import java.io.PrintWriter;
    import java.util.HashMap;
    import java.util.Map;
    import javax.servlet.http.HttpServletResponse;
    import org.apache.struts2.ServletActionContext;
    public class AjaxTest {
protected Map<String, Object> message = new HashMap<String, Object>();
/** AJAX请求返回RESULT的name常量*/
protected final static String MESSAGE = "message";
public Map<String, Object> getMessage() {
return message;
}
public void setMessage(Map<String, Object> message) {
this.message = message;
}
//-登录页面中form表单提交的路径
public String testajax() throws IOException{
System.out.println("获取参数name="+ServletActionContext.getRequest().getParameter("name"));
message.put("resultcode", "0000");
message.put("resultcode", "0001");
message.put("name", "zhong文ce试");
return MESSAGE;
}
     }
Nach dem Login kopieren


·Ajax-Anwendung übermittelt Formularformulardaten – Formulardaten werden automatisch in das JSON-Format konvertiert
Szenariobeschreibung: Wenn es sich bei den spezifischen Übermittlungsinformationen um ein Formular handelt und diese über Ajax an das Backend übergeben werden, verwenden wir normalerweise eine Methode namens Serialisierung, um das Formular in das JSON-Format zu konvertieren und zu übergeben es zum Backend (möchte sehen). Weitere Informationen finden Sie auf der PHP Chinese-Website AJAX Development Manual Spalte zum Lernen)

·Format des Formulars, das Das Formular-Tag hat eine ID und das Eingabe-Tag hat einen Namen

     <form  id="formid"> 
姓名:<input type="text" name="name" value="张三"/><br>
年龄:<input type="text" name="age" value="12"/><br>
<input type="submit" value="提交" id="submitid"/>
     </form>
Nach dem Login kopieren

Dieser Artikel endet hier (wenn Sie mehr sehen möchten, gehen Sie einfach auf die Spalte „PHP Chinesisch“
AJAX-Benutzerhandbuch

, um mehr zu erfahren). Nachricht unten

.

Das obige ist der detaillierte Inhalt vonDetails zur Ajax-Konfiguration, Erklärung des Ajax-Aufrufs, verstümmelte chinesische Ajax-Zeichen und Übermittlung von Ajax-Formularen (mit Beispielen). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
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
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage