欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  后端开发

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

程序员文章站 2022-05-25 21:25:38
...

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

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

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

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

学期

但是不会用,请大神赐教

回复内容:

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

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

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

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

学期

但是不会用,请大神赐教

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

      按钮二
      
  2. 在按钮二标签上加上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,不然提交表单会出现跳一下的情况
$.ajax({
url:"teacher.php?c=fankui",
type:"post",
data:{"xx":"xx"},
dataType:'html',
success:function(data){
//数据加载成功
},
error:function(){
//数据加载失败
}
});