【已解决】同时使用ajax和form表单传数据的冲突问题

昨天踩了一个大坑，下面总结一下：

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

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表单也提交了，页面会整体刷新一次，数据无法回传也就无法进行下面的操作，这样就进入了一个错误的循环，每次提交

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