0

我开始使用 jquery 和 jquery-ui。我在尝试提交选项卡内的表单时遇到问题。一旦我点击“提交”，页面就会自行刷新，选项卡消失了，并且 url 更改为选项卡的功能 url。提交按钮正在工作，我得到了想要的结果。但是，它与选项卡不在同一页面上。

有谁知道如何保持页面不刷新？

我的问题的例子：

我有一个名为“index.php”的页面，其中包含 3 个不同的选项卡。其中一个选项卡称为“提交表​​单”，其中我有一个使用 POST 方法的表单，它的源代码来自“form.php”。一旦我点击“提交”按钮，页面刷新，网址从“www.example.com”更改为“www.example.com/form.php”，我在那里得到结果，但页面是“普通的” , 表示它不在选项卡下，只是一个普通页面。

我希望我正确地解释了自己。

谢谢！

编辑：这是我的提交代码：

$submit = $_POST['submit'];
$name= $_POST['name'];

if($submit){
echo 'submitted <br><br>';
echo "hello $name";
}
4

2 回答 2

0

在 jQuery 中捕获表单提交，然后使用preventDefault();

$(function(){
  $('#formID').on('submit', function(e){
    e.preventDefault();
    var formSrc = $(this).attr('action');
    var formMethod = $(this).attr('method');
    var formData = $(this).serialize();
    $.ajax({
      url: formSrc,
      type: formMethod,
      data: formData,
      success: function(data){
        //work with returned data from requested file
        alert(data);
      }
    });
  });
});

编辑：

我应该补充一点，我选择使用on(); 与默认相反submit()。这是因为表单在 DOM.ready 上可能可用也可能不可用。

于 2012-04-14T04:56:45.947 回答
0

回答您的第二个问题：“如果我想运行通过同一选项卡中的 php 代码返回的这些信息，我该怎么做？”

让您的 php 脚本以 JSON 格式返回值，例如： $row = mysqli_fetch_array($result,MYSQLI_ASSOC);
回声 json_encode($row); 然后你可以让 javascript 对返回的值做任何你想做的事情，例如 -

    $.ajax({
        url: 'sc_getData.php?id=' + ID,
            type:'GET'
    })
    .done(function(myData) { // data = array returned from ajax 
        myData = JSON.parse(myData);    
        for (var i in tFields){
            thisSourceField = sFields[i];
            thisTargetField = tFields[i];
            targetID = '#' + thisTargetField;
            thisValue = myData[thisSourceField];
            $(targetID).val( thisValue );
            console.log(targetID + ': ' + thisValue);
        }
})

我已经为目标和源字段设置了数组。源字段数组匹配 php 脚本返回的字段名称，而目标字段数组将匹配要填充返回值的表单字段 id。

于 2015-03-02T16:58:39.963 回答