Question

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

有没有人知道如何防止页面刷新？

我的问题的例子：

我有一个名为'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";
}

Answer 1

在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上可能有也可能没有表格。

Answer 2

回答你的第二个问题：＆＃34;如果我想在同一个标签中运行通过php代码返回的这些信息怎么办？我怎么能这样做？＆＃34;

让您的php脚本返回值为JSON，如： $ row = mysqli_fetch_array（$ result，MYSQLI_ASSOC）;
echo 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以填充返回的值。

表单在jquery选项卡中提交

2 个答案: