Maison > Article > développement back-end > javascript - jquery的ajax和php配合使用实现无刷新表单提交的一点问题
如图就是我的页面,打开主页链接后显示的是主体部分(左侧黑框);
右侧子页面(右侧div#main_box内通过ajax获取的子页面)
在刚打开主页链接时显示按下按钮一时加载的子页面
现在我在按下按钮二时加载的子页面2中有个表单,需要提交表单然后通过PHP获取表单提交的值然后去数据库查询信息,返回数据库数据再输出到这个子页面2中,不知道怎么实现。
在网上找了好久找到这种方式:
<code><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> </code>
但是不会用,请大神赐教
如图就是我的页面,打开主页链接后显示的是主体部分(左侧黑框);
右侧子页面(右侧div#main_box内通过ajax获取的子页面)
在刚打开主页链接时显示按下按钮一时加载的子页面
现在我在按下按钮二时加载的子页面2中有个表单,需要提交表单然后通过PHP获取表单提交的值然后去数据库查询信息,返回数据库数据再输出到这个子页面2中,不知道怎么实现。
在网上找了好久找到这种方式:
<code><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> </code>
但是不会用,请大神赐教
使用iframe功能, 按钮二这个元素是个a标签, 展示成你希望的按钮的样子, 添加 target属性, 这样你第二个要求自然而然就解决了.
<code> <a href="%E7%9B%B8%E5%BA%94%E7%9A%84url" 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 '
<code>$.ajax({ url:"teacher.php?c=fankui", type:"post", data:{"xx":"xx"}, dataType:'html', success:function(data){ //数据加载成功 }, error:function(){ //数据加载失败 } }); </code>