javascript - jquery的ajax和php配合使用实现无刷新表单提交的一点问题

php中文网

发布： 2016-10-10 11:55:55

原创

1248人浏览过

javascript - jquery的ajax和php配合使用实现无刷新表单提交的一点问题

如图就是我的页面，打开主页链接后显示的是主体部分（左侧黑框）；
右侧子页面（右侧div#main_box内通过ajax获取的子页面）
在刚打开主页链接时显示按下按钮一时加载的子页面

现在我在按下按钮二时加载的子页面2中有个表单，需要提交表单然后通过PHP获取表单提交的值然后去数据库查询信息，返回数据库数据再输出到这个子页面2中，不知道怎么实现。

表单大师AI

一款基于自然语言处理技术的智能在线表单创建工具，可以帮助用户快速、高效地生成各类专业表单。

查看详情

在网上找了好久找到这种方式：

<code><form action="teacher.php" method="post">
      <p>学期</p><p><span>立即学习</span>“<a href="https://pan.quark.cn/s/7fc7563c4182" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">PHP免费学习笔记（深入）</a>”；</p>
      <select name="xueqi" id="xueqi">
            <option value="201520161">2015-2016学年第一学期</option>
            <option value="201520162">2015-2016学年第二学期</option>
            <option value="201620171">2016-2017学年第一学期</option>
      </select>
</form>
<script>
$(function(){
$("#jiansuo").click(function(){
             var xueqi = $("#xueqi").val();//取得表单的值
             var one = $("#one").val();
             var one_week = $("#one_week").val();
             var more = $("#more").val();
             var more_week_num = $("#more_week_num").val();
             var more_week_ba = $("#more_week_ba").val();
             var xingqi = $("#xingqi").val();
             var banji = $("#banji").val();
            //Ajax post数据
            $.ajax({
             type: "POST",//Ajax请求为post
             url: "teacher.php?c=fankui",//ajax请求URL 脚本地址
             data: {"xueqi":xueqi,"one":one,"one_week":one_week,"more":more,"more_week_ba":more_week_ba,"xingqi":xingqi,"banji":banji}, //传递的值
             success:  function(data){  //回调函数 这里的data你可以返回HTML也可以是JSON 为了简单你返回HTML就可以了。
              $("#main_right_box").html("").html(data);//将返回的列表插入分类.
             }
            });
           });

}
</script>
</code>

登录后复制

但是不会用，请大神赐教

回复内容：

javascript - jquery的ajax和php配合使用实现无刷新表单提交的一点问题

在网上找了好久找到这种方式：

<code><form action="teacher.php" method="post">
      <p>学期</p><p><span>立即学习</span>“<a href="https://pan.quark.cn/s/7fc7563c4182" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">PHP免费学习笔记（深入）</a>”；</p>
      <select name="xueqi" id="xueqi">
            <option value="201520161">2015-2016学年第一学期</option>
            <option value="201520162">2015-2016学年第二学期</option>
            <option value="201620171">2016-2017学年第一学期</option>
      </select>
</form>
<script>
$(function(){
$("#jiansuo").click(function(){
             var xueqi = $("#xueqi").val();//取得表单的值
             var one = $("#one").val();
             var one_week = $("#one_week").val();
             var more = $("#more").val();
             var more_week_num = $("#more_week_num").val();
             var more_week_ba = $("#more_week_ba").val();
             var xingqi = $("#xingqi").val();
             var banji = $("#banji").val();
            //Ajax post数据
            $.ajax({
             type: "POST",//Ajax请求为post
             url: "teacher.php?c=fankui",//ajax请求URL 脚本地址
             data: {"xueqi":xueqi,"one":one,"one_week":one_week,"more":more,"more_week_ba":more_week_ba,"xingqi":xingqi,"banji":banji}, //传递的值
             success:  function(data){  //回调函数 这里的data你可以返回HTML也可以是JSON 为了简单你返回HTML就可以了。
              $("#main_right_box").html("").html(data);//将返回的列表插入分类.
             }
            });
           });

}
</script>
</code>

登录后复制

但是不会用，请大神赐教

使用iframe功能, 按钮二这个元素是个a标签, 展示成你希望的按钮的样子, 添加 target属性, 这样你第二个要求自然而然就解决了.
```
<code>  <a href="相应的url" target="main_box_frame">按钮二</a>
  <div id="main_box"><iframe name="main_box_frame"></iframe></div></code>
```
登录后复制
在按钮二标签上加上click事件, 把要显示在main_box中的内容通过ajax取到, 并添加到main_box内, 然后绑到submit事件在取回的form上, 把form提交得到响应插入到 main_box中.

我的做法，是禁用默认提交事件，用jq的ajax发送请求，表单数据用data:
$(formSelector).serialize()就不用分别读取value了，通过回调函数刷新页面。

这个我知道，这样说吧，ajax返回的其实就是你那个teacher.php里面打印出来的，以dataType格式为html为例，你可以在那个teacher.php做个测试，直接echo '

嗨，我是要被传回去的

'，然后返回就在这个success:function(data){alert(data)};//看看是什么东西，假如是json的话那teacher.php只能输出的数据是echo json encode($array);在吧dataType:'json'
//不知道我有没有写错 = =#
//对了，那个表单你还得加个onsubmit='return checnkForm()';在checkForm()函数里写ajax，最后来个return false，不然提交表单会出现跳一下的情况

<code>$.ajax({
url:"teacher.php?c=fankui",
type:"post",
data:{"xx":"xx"},
dataType:'html',
success:function(data){
//数据加载成功
},
error:function(){
//数据加载失败
}
});
</code>

登录后复制