Several methods of local refresh page after form form form submission by Jquery

Recently, a small project just needs to use the search function to input data in the search box, press enter or click Submit, and then process the data to the background database and return it to the front end, and locally update the data in the front end.

But there is a small problem, that is, after entering any input box in the form form and pressing enter to submit, the whole page will refresh. Even if I use ajax to take data out of the background and return it to the front end to update the page, the whole page will immediately refresh to the original appearance.

The problem has nothing to do with ajax. It is the js part that needs to be transformed.

Test code:

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4 <meta charset="UTF-8">
 5 <script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
 6 <script type="text/javascript">
 7 $(document).ready(function ()
 8 {
 9     $("#form1").submit(function () 
10     {
11         $("#show").text("444");
12     });
13     
14     $("#form2").submit(function () 
15     {
16         $("#show").text("777");
17         //Some can be done in the middle ajax Data interaction, enabling"777"Value returned for background
18         return false;
19     });
20     
21     $("#btn").click(function () 
22     {
23         $("#show").text("555");
24     });
25     
26     $("#num3").keydown(function(e)
27     { 
28         //Press keyboard trigger function
29         if(e.keyCode==13)
30         { 
31             //If you press enter
32             $("#show").text("666"); //Handling events
33         }
34     });
35 })
36 </script>
37 </head>
38 <body>
39     <form id="form1">
40         Form 1:<input type="text">
41         <input type="submit" value="Press enter in the left input box or click this button, you can see that the text value of 333 flashes past 444 and back to 333">
42     </form>
43 
44     <form id="form2">
45         Form 2:<input type="text">
46         <input type="submit" value="Press enter in the left input box or click this button, you can see that the text value 333 is changed to 777 and will not go back">
47     </form>
48 
49     Independent input box (press enter to update the text to 666):<input type="text" id="num3">
50     <br>
51 
52     <button id="btn">Click to change the text value to 555</button>
53     <span id="show">333</span>
55 </body>
56 </html>

Interface:

    

First of all, the form cannot have action jump. If there is action jump, it will definitely update or jump to other pages

Method 1: write an onsubmit function to the form form, and add the following sentence at the end: return false. If return false is not added, the whole page will be refreshed immediately when the page is submitted, and the data change is just a flash;

Method 2: instead of using the < input type = "submit" > method, set a button button to let the user manually click the button to change the data.

In the final analysis, this problem has no direct relationship with ajax. ajax is just a means of front-end and back-end interaction. Finally, it is necessary to update the data part through the front-end. This problem is a front-end one.

 

Reprint link: https://www.cnblogs.com/dhx96/p/6795057.html

Tags: Javascript JQuery Database

Posted on Mon, 04 May 2020 23:30:06 -0700 by geo3d