Ajax功能不能正常工作

我試圖使用Ajax基本數據庫插入和插入部分工作正常的問題是，插入完成後，頁面正在重定向。我之前來到acroos此問題，並找到了解決方案（更改src部分像下面）Ajax功能不能正常工作

src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js">

但是這個解決方案沒有工作，這次我又在錯什麼？

這是index.php文件

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <title>Title</title> 
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> 
    <script type="text/javascript" src="site.js"></script> 
</head> 
<body> 
<form action="process.php" id="myForm"method="post"> 
    <input type="text" name="uname"><br> 
    <input type="text" name="pass"><br> 
    <input type="text" name="fname"><br> 
    <input type="text" name="lname"><br> 
    <button id="submit" value="Insert"/> <br> 

</form> 
<div id="ack"></div> 
</body> 
</html>

，這是我的腳本

$("#submit").click(function() { 

    $.post($("#myForm").attr("action"), 
     $("#myForm :input").serializeArray(), 
     function(info) { 

      $("#ack").empty(); 
      $("#ack").html(info); 
      clear(); 
     }); 

}); 

$("#myForm").submit(function(event) { 
    event.preventDefault(); 
    return false; 
}); 

function clear() { 

    $("#myForm :input").each(function() { 
     $(this).val(""); 
    }); 

}

來源

2016-09-30 ali ak

您可以向按鈕添加一個'type =「按鈕''屬性，以便它不會充當提交按鈕（默認類型）。 –

的提交調用不會真正屬於單擊處理程序，將其移出並使用event.preventDefault（）如果你想通過除你創建的點擊處理程序以外的方式避免表單提交。

$("#submit").click(function() { 

    $.post($("#myForm").attr("action"), 
     $("#myForm :input").serializeArray(), 
     function(info) { 

      $("#ack").empty(); 
      $("#ack").html(info); 
      clear(); 
     }); 

}); 

$("#myForm").submit(function(event) { 
    event.preventDefault(); 
    return false; 
}); 

function clear() { 

    $("#myForm :input").each(function() { 
     $(this).val(""); 
    }); 

}

來源

2016-09-30 19:56:01

如果來自表單域的數據是通過$ .post方法發送插入的，那麼爲什麼需要通過提交功能分別提交表單呢？ –

沒有必要。 $（'＃myForm'）。submit（...）不是必須的，但可以作爲回退來防止瀏覽器通過用戶單擊按鈕之外的其他方式提交表單的情況（例如，按Enter鍵入一個文本字段）。 –

是的，你是對的，這可以是一個案例。 –

切換到.submit（）事件處理程序：

$("#myForm").submit(function(event) { 
    $.post($("#myForm").attr("action"), 
     $("#myForm :input").serializeArray(), 
     function(info) { 
      $("#ack").empty(); 
      $("#ack").html(info); 
      clear(); 
     }); 
    event.preventDefault(); 
});

來源

2016-09-30 20:25:31

說明

包裝你.post的$代碼提交處理函數。
使用event.preventDefault（）函數來阻止表單提交。
使用$（'＃myform'）[0] .reset（）清除輸入字段，而不是使用單獨的清除功能。

代碼

$("#myForm").submit(function (event) { 
    $.post($("#myForm").attr("action"), 
      $("#myForm :input").serializeArray(), 
      function (info) { 
       $("#ack").empty(); 
       $("#ack").html(info); 
       // instead of using the clear() function 
       // separately you may clear all the empty 
       // fields like this 
       $('#myform')[0].reset(); 
      }); 
    event.preventDefault(); 
});

來源

2016-09-30 21:11:54

不知道這是否會與jQuery 1.8.2工作，但這裏是我是如何完成的，在過去同樣的事情。

$('#myForm').on('submit', function(e) { 
    e.preventDefault(); 
    var details = $('#myForm').serialize(); 
    $.post('process.php', details, function(data) { 
     $('#ack').html(data); 
     $('#myForm').trigger("reset"); 
    }); 
});

來源

2016-09-30 21:41:47

Ajax功能不能正常工作

回答

相關問題