Comment accéder à une nouvelle page jsp avec ajax (avec code)

Cette fois, je vais vous montrer comment accéder à une nouvelle page jsp avec ajax (avec code). Quelles sont les précautions pour qu'ajax accède à une nouvelle page jsp. Ce qui suit est un cas pratique. . Levez-vous et jetez un œil.

ajax peut actualiser partiellement la page, c'est-à-dire mettre à jour les informations partielles de la page sans actualiser la page entière.

J'ai rencontré un problème dans le projet : dans la liste des utilisateurs, lorsqu'un bouton est cliqué, les informations de l'utilisateur doivent être interrogées. Si la requête réussit, elle passera à l'interface des détails de l'utilisateur ; la requête échoue, un message d'invite apparaîtra sur la page d'origine.

Pensez à deux solutions :

Méthode 1 :

Cliquez sur le bouton et appelez la méthode normale pour interroger les informations de l'utilisateur si la requête réussit. , accédez à la page Détails de l'utilisateur ; si la requête échoue, la redirection appelle la méthode d'interrogation de la liste d'utilisateurs. Une fois la méthode d'interrogation de la liste d'utilisateurs terminée, elle revient à la page de la liste d'utilisateurs et affiche un message d'invite, qui apparaît. équivaut à recharger la page de la liste des utilisateurs.

Méthode 2 :

Selon les exigences, la page de la liste des utilisateurs ne peut pas être rechargée. Utilisez ajax pour appeler la méthode d'interrogation des détails de l'utilisateur. Si la requête réussit, la chaîne Json de l'utilisateur sera renvoyée. Si la requête échoue, une erreur sera renvoyée.

Méthode d'arrière-plan :

@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, "查询用户失败");
    }  
 }

ajax de la page jsp :

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("查询用户有误！");
        }
     });    
  }　

L'accent ici est sur la façon d'utiliser la fonction de rappel d'ajax Appeler le méthode ordinaire et transmettez les données utilisateur précédemment interrogées à la méthode ordinaire (la partie rouge dans le pseudo-code ci-dessus), puis accédez à la page de détails de l'utilisateur.

(1) Cas d'erreur :

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("查询用户有误！");
        }
      });    
   }

Raison de l'erreur : La méthode window.location.href est une méthode get, qui entraînera l'affichage des paramètres dans l'url du navigateur, et non Sécurisé et il y a une limite à la durée du transfert de données.

(2) La méthode stupide qui me vient à l'esprit : écrire un formulaire caché dans le corps, copier les données utilisateur trouvées dans l'entrée du formulaire dans la fonction de rappel, puis soumettre le formulaire et passer à l'entrée du formulaire. méthode normale, ce sont les données soumises par la méthode post, et vous pouvez accéder à une nouvelle page :

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("查询用户有误！");
        }
      });    
   }　

corps de la page jsp

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

Je crois que vous maîtrisez après avoir lu le cas dans cet article Méthode, pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Ajax+Servlet pour implémenter un lien déroulant sans actualisation (avec code)

ajax pour obtenir des données json Comment utiliser

pour undéfini

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!