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

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