javascript - jquery的ajax和php配合使用實現無刷新表單提交的一點問題

WBOY

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

原創

1113 人瀏覽過

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>

登入後複製

但是不會用，請大神賜教

回覆內容：

javascript - jquery的ajax和php配合使用實現無刷新表單提交的一點問題

在網路上找了好久找到這種方式：

<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="相应的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>

登入後複製