How to make a partial page jump function in ajax-JS Tutorial-php.cn

How to make a partial page jump function in ajax

php中世界最好的语言

Release： 2018-04-25 16:14:34

Original

2333 people have browsed it

This time I will show you how ajax can make a partial page jump function. What are the precautions for ajax to make a partial page jump function? The following is a practical case, let's take a look.

Through code sample analysis, I will introduce to you the implementation of ajax to achieve partial page jump and result return. The specific content is as follows:

1. Submission process with result return

A submit button is used to demonstrate here. The HTML code is:

<input type="button" class="btn" value="提报" name="submit4" onClick="tibao();">

Copy after login

After clicking the report button, ajax is used to jump to the action for processing.

JavaScriptThe code is:

function tibao(){
var id='';
var URL = <select:link page="/smokeplan.do?method=Tibao&idset="/>+id;
  $.ajax({url: URL, 
    　　type: 'GET',
    　　success: function(result) {
           alert(result);
        }
  });
}

Copy after login

After the action processing is completed, the returned result will be placed in the result, and a prompt message will pop up on the page; of course, the action jump here needs to be configured with xml.

The background Java class processing process is:

//提报
    public void Tibao(ActionMapping mapping, ActionForm form,
        HttpServletRequest request, HttpServletResponse response) throws Exception {
      String idset=request.getParameter("idset");
      CallHelper helper = initializeCallHelper("L_SmokeBoxtibaoWLDan", form,request, false);
      helper.setParam("bill_ids",idset);
      helper.setParam("personid",getPersonId(request));
      helper.execute();
      PrintWriter write = response.getWriter();
      write.print(helper.getOutput("message"));
      write.close();
    }

Copy after login

Here, the data is processed through a sql statement, a message is returned, and the information is printed to the page;

The result of the operation done here is reflected to the position corresponding to the response, so the stream belonging to the response is obtained instead of a new one.

That is to say, if I jump from there, my information will be returned there. So in js, you can use result to receive the returned result, and use alert to prompt.

How to use AJAX to achieve page jump

The sample code is as follows:

The ajaxAnywhere framework is used in the project to implement ajax , the effect is good and easy to implement, but the problem now is that even if the page achieves the effect, the business still needs to submit the form. In this case, even after clicking submit, it will still refresh the zone area you defined. At this time, If simply submitting the form is not enough, the solution I adopted is:

Use js, a powerful BS project development tool, to self-define a function

to solve the above problem:

function doGuahao()
{
 if(checkdata())
 {
 if(document.form1.result_flag.value=="0")
 {
  return false;
 }
 else
 {
  if(document.form1.checktype.value=="danganhao")
  {
  form1.action = "<%=formAction%>";
  form1.submit();
  }
  if(document.form1.checktype.value=="xingming")
  {
  form1.action = parent.left.url2;
  form1.submit();
  }
  if(document.form1.checktype.value=="shenfenzheng")
  {
  form1.action = "<%=formAction%>";
  form1.submit();
  }
 }
 } 
}

Copy after login

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!