昨天踩了一个大坑,下面总结一下:
前后端数据交互的两种方式:
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表单也提交了,页面会整体刷新一次,数据无法回传也就无法进行下面的操作,这样就进入了一个错误的循环,每次提交
数据确实可以提交到后端,但是返回的数据无法被接收,因为页面被整体刷新了。