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

问题描述

问 题

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

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

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

<form action="teacher.php" method="post">
      <p>学期</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>

但是不会用，请大神赐教

解决方案

1. 使用iframe功能, 按钮二这个元素是个a标签, 展示成你希望的按钮的样子, 添加 target属性, 这样你第二个要求自然而然就解决了.

     <a href="相应的url" target="main_box_frame">按钮二</a>
     <div id="main_box"><iframe name="main_box_frame"></iframe></div>

2. 在按钮二标签上加上click事件, 把要显示在main_box中的内容通过ajax取到, 并添加到main_box内, 然后绑到submit事件在取回的form上, 把form提交得到响应插入到 main_box中.

这篇关于javascript - jquery的ajax和php配合使用实现无刷新表单提交的一点问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！