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

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

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

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

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

$.ajax({
url:"http://www.test.com",    //请求的url地址
dataType:"json",   //返回格式为json
async:true,//请求是否异步，默认为异步，这也是ajax重要特性
data:{"id":"1","name":"名字"},    //参数值
type:"GET",   //请求方式
beforeSend:function(){
//请求前的处理
},
success:function(req){
//请求成功时处理
},
complete:function(){
//请求完成的处理
},
error:function(){
//请求出错处理
}
});

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

<select id="myselect">
<option value="result_data" selected>全部数据</option>
<option value="result_cj">财经</option>
<option value="result_fc">房产</option>
<option value="result_game">游戏</option>
<option value="result_js">军事</option>
<option value="result_jy">教育</option>
<option value="result_kj">科技</option>
<option value="result_qc">汽车</option>
<option value="result_ty">体育</option>
<option value="result_tyjd">体育焦点</option>
<option value="result_zhty">综合体育最新</option>
<option value="result_yl">娱乐</option>
</select>
<button  onclick="tijiao()">检索</button>

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

function tijiao(){
var select_value= document.getElementById("myselect").value
$.ajax({
url:"/cloud_data?data="+select_value+"",
async:true,
success:function(data) {
option.series[0].data=data.data
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
},
error:function (xhr,type,errorThrown) {
alert("出现错误！")
}
})
}

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

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

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

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

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

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