Heim  >  Artikel  >  Web-Frontend  >  Detailliertes Beispiel für die einfache Implementierung der Ajax-Funktion von „prototyp.j“.

Detailliertes Beispiel für die einfache Implementierung der Ajax-Funktion von „prototyp.j“.

小云云
小云云Original
2018-01-09 15:03:451635Durchsuche

In diesem Artikel wird hauptsächlich die einfache Implementierung der Ajax-Funktion in Prototyp.js vorgestellt und die zugehörigen Betriebsfähigkeiten von Prototyp.js Front-End-Ajax und Hintergrundstreben in Form von Beispielen analysiert. Ich hoffe, es kann allen helfen.

Ursprünglich wusste ich nicht, dass es sich bei „prototyp.js“ um ein Framework handelt. Ich dachte nur, es sei eine gewöhnliche JS-Datei Nachdem ich den AJAX-Effekt verwendet habe, ist es für mich nicht mehr notwendig, einen so großen Codehaufen zu schreiben .

1. JSP-Teil

Der kritischste Teil dieses Teils des Codes ist die Änderung im JS-Teil. Wenn er nicht verwendet wird, ist mindestens ein AJAX-Effekt erforderlich vier Abschnitte. Jetzt ist nur noch der folgende kleine Codeabschnitt erforderlich.

<script type="text/javascript">
function getnodelist(){
  function onSuccess(request)
  {
      alert("success");
     $("result").innerHTML = "abc"+request.responseText ;
  }
  function onComplete(request){
  }
  function onFailure(request){
     alert("failure");
     $("result").innerHTML = request.responseText ;
  }
  var paras = "" ;
  var ajax = new Ajax.Request(
     "http://localhost:8080/LoginDemo/test.do",
    {
    method: 'post',
    parameters:paras ,
    onSuccess: onSuccess,
    onComplete:onComplete,
    onFailure:onFailure
   }
 );
}
</script>

Der wichtigste ist dieser Absatz:

var ajax = new Ajax.Request(   //新生成一个AJAX.Request对象.
 "http://localhost:8080/LoginDemo/test.do", //请求的servlet地址.即URL
 {                                //参数
  method: 'post',
  parameters:paras ,
  onSuccess: onSuccess,       //这些函数和上面三个函数相对应.
  onComplete:onComplete,
  onFailure:onFailure
 });

Hinweis: Die darin enthaltene URL sollte entweder geschrieben werden als absoluten Pfad, oder nehmen Sie einfach <% String path = request vor .getContextPath();%> und dann hier
"<%=path%>/test.do"

Das Praktischste an Prototyp.js ist für mich, dass ich es nicht selbst tun muss. Um den Status des aktuellen Browsers zu ermitteln, rufen Sie bei Erfolg die Funktion OnSuccess auf. Wenn dies fehlschlägt, rufen Sie die Funktion onFailure auf. und ich konzentriere mich nur darauf, was nach Erfolg und Misserfolg zu tun ist, um das Programm zu vereinfachen

2. Hintergrundstützen-Teil

public ActionForward execute(
    ActionMapping mapping,
    ActionForm form,
    HttpServletRequest request,
    HttpServletResponse response) {
    // TODO Auto-generated method stub
    try{
      System.out.println("in action");
     response.setContentType("text/html;charset=gb2312");
      ServletOutputStream out = response.getOutputStream();
      out.print("hello slf!");
      System.out.println("out");
    }catch(Exception e)
    {
      e.printStackTrace();
    }
    return null;
  }

Einfaches Drucken.

Konzepte und Beispiele für die Ajax-Funktion von Javascript

Implementieren eines Webdienstes basierend auf der Ajax-Funktion von jQuery, json Conversion_jquery

Die integrierte AJAX-Funktion von jQuery und die JSON-Nutzungsbeispiele_jquery

Das obige ist der detaillierte Inhalt vonDetailliertes Beispiel für die einfache Implementierung der Ajax-Funktion von „prototyp.j“.. 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