【已解决】同时使用ajax和form表单传数据的冲突问题([solved] the conflict between using Ajax and form forms to transfer data at the same time)

昨天踩了一个大坑,下面总结一下:

前后端数据交互的两种方式:

1、ajax发起请求(请求中可以带有数据)并获取返回的数据

下面给出一个ajax的常见格式:

 1 $.ajax({
 2     url:"http://www.test.com",    //请求的url地址
 3     dataType:"json",   //返回格式为json
 4     async:true,//请求是否异步,默认为异步,这也是ajax重要特性
 5     data:{"id":"1","name":"名字"},    //参数值
 6     type:"GET",   //请求方式
 7     beforeSend:function(){
 8         //请求前的处理
 9     },
10     success:function(req){
11         //请求成功时处理
12     },
13     complete:function(){
14         //请求完成的处理
15     },
16     error:function(){
17         //请求出错处理
18     }
19 });

实现这种方式的常见方法是给html的标签添加事件,用事件驱动ajax完成数据交互,比如:

 1         <select id="myselect">
 2             <option value="result_data" selected>全部数据</option>
 3             <option value="result_cj">财经</option>
 4             <option value="result_fc">房产</option>
 5             <option value="result_game">游戏</option>
 6             <option value="result_js">军事</option>
 7             <option value="result_jy">教育</option>
 8             <option value="result_kj">科技</option>
 9             <option value="result_qc">汽车</option>
10             <option value="result_ty">体育</option>
11             <option value="result_tyjd">体育焦点</option>
12             <option value="result_zhty">综合体育最新</option>
13             <option value="result_yl">娱乐</option>
14         </select>
15         <button  onclick="tijiao()">检索</button>

上面的代码通过给一个button添加tijiao( )事件,把select标签的数据传递到后端

 1 function tijiao(){
 2             var select_value= document.getElementById("myselect").value
 3             $.ajax({
 4                 url:"/cloud_data?data="+select_value+"",
 5                 async:true,
 6                 success:function(data) {
 7                     option.series[0].data=data.data
 8                     // 使用刚指定的配置项和数据显示图表。
 9                     myChart.setOption(option);
10                 },
11                 error:function (xhr,type,errorThrown) {
12                     alert("出现错误!")
13                 }
14             })
15         }

2、提交form表单发起请求并传递数据

如果想把select标签的数据传递到后端,还有一种方式是提交表单,也就是使用form和input标签的submit。

关键在于form提交和ajax提交这两种方式是不可以混用的,因为表单和ajax同时提交的话,页面就会整体刷新。

我的问题在于在一个form表单的有submit属性的标签上添加了ajax事件,用两种方式同时提交数据,每次提交之后,ajax并不能获取到后台传回的数据

因为ajax执行成功之后,form表单也提交了,页面会整体刷新一次,数据无法回传也就无法进行下面的操作,这样就进入了一个错误的循环,每次提交

数据确实可以提交到后端,但是返回的数据无法被接收,因为页面被整体刷新了。

————————

I stepped on a big pit yesterday. Here is a summary:

There are two ways to interact with front and rear data:

1. Ajax initiates a request (which can contain data) and gets the returned data

Here is a common format for Ajax:

 1 $.ajax({
 2     url:"http://www.test.com",    //请求的url地址
 3     dataType:"json",   //返回格式为json
 4     async:true,//请求是否异步,默认为异步,这也是ajax重要特性
 5     data:{"id":"1","name":"名字"},    //参数值
 6     type:"GET",   //请求方式
 7     beforeSend:function(){
 8         //请求前的处理
 9     },
10     success:function(req){
11         //请求成功时处理
12     },
13     complete:function(){
14         //请求完成的处理
15     },
16     error:function(){
17         //请求出错处理
18     }
19 });

A common way to implement this method is to add events to HTML tags and use event driven Ajax to complete data interaction, such as:

 1         <select id="myselect">
 2             <option value="result_data" selected>全部数据</option>
 3             <option value="result_cj">财经</option>
 4             <option value="result_fc">房产</option>
 5             <option value="result_game">游戏</option>
 6             <option value="result_js">军事</option>
 7             <option value="result_jy">教育</option>
 8             <option value="result_kj">科技</option>
 9             <option value="result_qc">汽车</option>
10             <option value="result_ty">体育</option>
11             <option value="result_tyjd">体育焦点</option>
12             <option value="result_zhty">综合体育最新</option>
13             <option value="result_yl">娱乐</option>
14         </select>
15         <button  onclick="tijiao()">检索</button>

The above code passes the data of the select tag to the back end by adding a Tijiao () event to a button

 1 function tijiao(){
 2             var select_value= document.getElementById("myselect").value
 3             $.ajax({
 4                 url:"/cloud_data?data="+select_value+"",
 5                 async:true,
 6                 success:function(data) {
 7                     option.series[0].data=data.data
 8                     // 使用刚指定的配置项和数据显示图表。
 9                     myChart.setOption(option);
10                 },
11                 error:function (xhr,type,errorThrown) {
12                     alert("出现错误!")
13                 }
14             })
15         }

2. Submit the form, initiate the request and pass the data

If you want to transfer the data of the select tag to the back end, another way is to submit the form, that is, use the submit of the form and input tags.

The key is that form submission and Ajax submission cannot be mixed, because if the form and Ajax are submitted at the same time, the page will refresh as a whole.

My problem is that < strong > Ajax events are added to the label with submit attribute of a form. Data is submitted simultaneously in two ways. After each submission, AJAX cannot obtain the data returned from the background < / strong >,

Because after the successful execution of Ajax, the form is also submitted, and the page will be refreshed as a whole. If the data cannot be returned, the following operations cannot be carried out. In this way, an error cycle is entered, each submission

The data can indeed be submitted to the back end, but the returned data cannot be received because the page is refreshed as a whole.