Home > Web Front-end > JS Tutorial > How to implement partial page jump and result return with ajax_javascript skills

How to implement partial page jump and result return with ajax_javascript skills

WBOY
Release: 2016-05-16 15:43:13
Original
1206 people have browsed it

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

1. Submission process with result return

Here is a submit button to demonstrate, the HTML code is:

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

After clicking the report button, jump to the action for processing through ajax. The JavaScript code is:

function tibao(){
var id='';
var URL = <select:link page="/smokeplan.do&#63;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 still The zone you defined will be refreshed. At this time, simply submitting the form is not enough. The solution I adopted is:

Use js, a powerful BS project development tool, to customize a function to solve the above problems:

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

The above content is the entire content of this article introducing how ajax implements partial page jumps and result returns. I hope you like it.

source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template