实现在前台向后台提交数据的同时又从后台获取数据

功能描述：实现在前台向后台提交数据的同时又从后台获取数据

---

如何实现在form表单中点击type=”submit”类型的按钮实现提交前台数据的同时执行一个javascript函数

---

提交数据：采取form表单提交数据的方法；

代码如下：

<form name=searchForm action="searchInfo.php" method="post" target="targetIfr"> 
            <select name="select" id="Option" class="select">
                <option value="1">搜&nbsp设&nbsp备</option>
                <option value="2">搜&nbsp用&nbsp户</option>
            </select>
            <input type="text" name="infos" id="inputInfo" class="enter" value="">
            <input type="submit" name="submit" class="submit" value="" onclick="searchI()">
        </form>
<iframe name="targetIfr" style="display:none"></iframe> <!-- 实现点击提交，页面不跳转的功能 --> 

请求数据：点击按钮的同时执行一个js函数，函数里用ajax从后台请求数据

代码如下：

function searchI(){
    $.ajax({
            url:"searchInfo.php",
            type:"GET",
            dataType:"json",
            async:false,
            success:function(data){
                alert(data.SNstr);
                alert(data.Userstr);
            },
            error: function(XMLHttpRequest, textStatus, errorThrown) {
//这个error函数调试时非常有用，如果解析不正确，将会弹出错误框
　　　　        alert(XMLHttpRequest.responseText); 
                alert(XMLHttpRequest.status);
                alert(XMLHttpRequest.readyState);
                alert(textStatus); // parser error;
            }
    });
}

后台程序：

$resultJson;
$resultJson=array("SNstr"=>12,"Userstr"=>9);
echo urldecode(json_encode($resultJson));

如图所示： 当我点击搜索按钮之后，搜索框中输入的内容被提交到后台，同时我从后台获取到几个数据，通过alert()函数输出到前端页面，

。

总结

： form表单中type为submi类型的按钮，不添加onclik=“XXX()”时只执行提交表单数据的功能，添加

onclik=“XXX()”后，可在提交表单数据的时候同时执行另一函数。

写在文末：

声明：以上内容为本人学习过程中的一定经验，如有谬误，请批评指正，谢谢

后期补充：
>后期补充
**>

纠正：之前写的这篇文章存在一些漏洞，再次做一个说明:**

用我以上的方式进行提交数据给后台又从后台获取数据的方法存在一个问题，因为ajax是异步通信，所以可能会出现这样的问题，你用ajax从后台获取的数据可能是空的，提交数据和获取数据的顺序并不是一先以后顺序执行的，可能ajax从后台获取数据的动作先于提交数据的动作执行，这就会导致获取的数据是空的；
重点内容*另一正确方法：*
提交数据和像后天请求数据都是用ajax的方式进行，这样可以达到提交和获取数据的效果，而且是同步的！

示例代码（该代码不完整，只列出了部分关键代码）：

 $.ajax({
            url:"searchInfo.php",
            type:"POST",
            data: {"choose":document.getElementById('Option').value, "value":document.getElementById('inputInfo').value},
            dataType:"json",
            async:false,
            success:function(data){
                if((data.Devstr=="error")||(data.Userstr=="error")){
                    alert("设备（用户）名称输入有误，请核实后重新输入");
                }else

 <form name=searchForm  target="targetIfr"> 
            <select name="select" id="Option" class="select">
                <option value="1">搜&nbsp设&nbsp备</option>
                <option value="2">搜&nbsp用&nbsp户</option>
            </select>
            <input type="text" name="infos" id="inputInfo" class="enter" value="">
            <input type="submit" name="submit" class="submit" value="" onclick="searchI()">
        </form>