So springen Sie mit Ajax (mit Code) zu einer neuen JSP-Seite

Dieses Mal zeige ich Ihnen, wie Sie mit Ajax (mit Code) zu einer neuen JSP-Seite springen. Das Folgende ist ein praktischer Fall . Steh auf und schau es dir an. Ajax kann die Seite teilweise aktualisieren, dh die Teilinformationen der Seite aktualisieren, ohne die gesamte Seite zu aktualisieren.

Ich bin auf ein Problem im Projekt gestoßen: Wenn in der Benutzerliste auf eine Schaltfläche geklickt wird, müssen die Informationen des Benutzers abgefragt werden. Wenn die Abfrage erfolgreich ist, wird zur Benutzerdetailseite gesprungen Wenn die Abfrage fehlschlägt, wird auf der Originalseite eine Eingabeaufforderung angezeigt.

Überlegen Sie sich zwei Lösungen:

Methode 1:

Klicken Sie auf die Schaltfläche und rufen Sie die normale Methode auf, um Benutzerinformationen abzufragen, wenn die Abfrage erfolgreich ist , springen Sie zur Seite „Benutzerdetails“. Wenn die Abfrage fehlschlägt, ruft die Umleitung die Methode zum Abfragen der Benutzerliste auf entspricht dem Neuladen der Benutzerlistenseite.

Methode 2:

Je nach Anforderungen kann die Benutzerlistenseite nicht neu geladen werden. Verwenden Sie Ajax, um die Methode zum Abfragen von Benutzerdetails aufzurufen. Wenn die Abfrage erfolgreich ist, wird die JSON-Zeichenfolge des Benutzers zurückgegeben. Wenn die Abfrage fehlschlägt, wird ein Fehler zurückgegeben.

Hintergrundmethode:

Ajax der JSP-Seite:

@RequestMapping(value = "searchUser")
 public void searchHome(HttpServletResponse response){
    String result = null;
    ...
    查询用户的方法
    ...
 
    if(查询成功){
       result = JsonUtil.objectToJson(查询结果对象);//结果对象转化成Json字符串，在ajax的结果中跳转到用户详情的处理方法
       AjaxUtil.ajax(response,result);
    }else{//查询失败，返回提示信息
       AjaxUtil.error(response, "查询用户失败");
    }  
 }

Der Schwerpunkt liegt hier auf der Verwendung der

function searchUser(){
     $.ajax({
        url : "testurl/searchUser",
        cache : false,
        type : 'POST',
        data : {
          查询用的数据，比如用户ID
        },
        success : function(data) {
          var obj = eval("("+data+")"); 
           
          if(obj.success==undefined){//查询成功，跳转到详情页面
             ...
             跳转到用户详情处理方法，将date数据传过去
             ...
          }else if(!obj.success){//查询失败，弹出提示信息
             weui.Loading.info(obj.message);
          }
        },
        error : function(error) {
          weui.alert("查询用户有误！");
        }
     });    
  }　

Rückruffunktion

von Ajax gewöhnliche Methode und übergeben Sie die zuvor abgefragten Benutzerdaten an die gewöhnliche Methode (den roten Teil im Pseudocode oben) und springen Sie dann zur Seite mit den Benutzerdetails. (1) Fehlerfall:

Fehlerursache: Die Methode window.location.href ist eine Get-Methode, die dazu führt, dass die Parameter in der URL des Browsers angezeigt werden. nicht

function searchUser(){
      $.ajax({
        url : "testurl/searchUser",
        cache : false,
        type : 'POST',
        data : {
           查询用的数据，比如用户ID
        },
        success : function(data) {
           var obj = eval("("+data+")");
           if(obj.success==undefined){//查询成功，跳转到详情页面，encodeURIComponent编码是为了防止url后面传送的参数中文乱码,在后台处理时需要解码
             window.location.href = "testurl/userForm?userJson="+encodeURIComponent(data);
           }else if(!obj.success){//查询失败，弹出提示信息
              weui.Loading.info(obj.message);
           }
        },
        error : function(error) {
           weui.alert("查询用户有误！");
        }
      });    
   }

sicher

und die Länge der Datenübertragung ist begrenzt. (2) Die dumme Methode, die mir in den Sinn kommt: Schreiben Sie ein verstecktes Formular in den Textkörper, kopieren Sie die gefundenen Benutzerdaten in die Eingabe im Formular in der Rückruffunktion, senden Sie dann das Formular ab und springen Sie zum Normale Methode, dies sind die von der Post-Methode übermittelten Daten, und Sie können zu einer neuen Seite springen:

Körper der JSP-Seite

function searchUser(){
      $.ajax({
        url : "testurl/searchUser",
        cache : false,
        type : 'POST',
        data : {
           查询用的数据，比如用户ID
        },
        success : function(data) {
           var obj = eval("("+data+")");
           if(obj.success==undefined){//查询成功，跳转到详情页面
             $("#userFormJson").val(data);
             $("#userForm").attr("action","testurl/userForm");
             $("#userForm").submit();
           }else if(!obj.success){//查询失败，弹出提示信息
              weui.Loading.info(obj.message);
           }
        },
        error : function(error) {
           weui.alert("查询用户有误！");
        }
      });    
   }　

Ich glaube, Sie haben es gemeistert Nachdem Sie den Fall in dieser Artikelmethode gelesen haben, lesen Sie bitte andere verwandte Artikel auf der chinesischen PHP-Website für weitere spannende Informationen!

<body>
  <form id="userForm" action="" method="post">
    <input id="userFormJson" name="userFormJson" type="hidden"/>
  </form>
</body>

Empfohlene Lektüre:

Ajax+Servlet zur Implementierung einer aktualisierungsfreien Dropdown-Verknüpfung (mit Code)

Ajax So erhalten Sie JSON-Daten. So verwenden Sie

für undefiniert

Das obige ist der detaillierte Inhalt vonSo springen Sie mit Ajax (mit Code) zu einer neuen JSP-Seite. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!