javascript - JQUERY + PHP + AJAX 不起作用

标签 javascript php jquery mysql ajax

我正在开发简单的 html 程序,它使用 php 脚本将数据插入 MySQL DB。 但每次我按下“保存”按钮时,它都会将我重定向到 php 页面。 我已经创建了 Javascript 文件,但它对我不起作用。 请帮忙

HTML 文件 (index.html)

    <html>
    <head>
    <script src="js/jquery-1.11.0.min.js" type="text/javascript"></script>
    <script src="js/my_script.js" type="text/javascript"></script>
    </head>
<body>
    <form id="myForm" action="demo_insert.php" method="post">
    Name : <input type="text" name="name"><br />
    Email : <input type="text" name="email"><br />
    Domain : <input type="text" name="domain"><br />
    Role : <input type="text" name="role"><br />
    <button id="sub">Save</button>
    </form>
    <span id="result"></span>
</body>    
</html>

php文件

<?php
         $conn = mysql_connect('localhost', 'root', '');
         $db   = mysql_select_db('test');
$name=$_POST['name'];
$domain=$_POST['domain'];
$email=$_POST['email'];
$role=$_POST['role'];
$sql = "INSERT INTO user20015 VALUES ('$name', '$domain', '$email', '$role')";
        if(mysql_query($sql))
         echo "Successfully Inserted";
        else
        echo "Insertion Failed";
?>

my_script.js 文件

$("#sub").click( function() {
 $.post( $("#myForm").attr("action"),
         $("#myForm :input").serializeArray(),
         function(info){ $("#result").html(info);
   });
clearInput();
});

$("#myForm").submit( function() {
  return false;
});
function clearInput() {
    $("#myForm :input").each( function() {
       $(this).val('');
    });
}

最佳答案

替换

$("#myForm :input").serializeArray(),

$("#myForm").serializeArray(),

正如此方法“将一组表单元素编码为名称和值的数组。”

$("#myForm").submit( function(e) {
  /* prevent default form submission */
  e.preventDefault();
  var form = $(this);
  $.post(form.attr("action"), form.serializeArray(), function(info){
    $("#result").html(info);
    /* reset form fields to defaults */
    form.reset();
  });  
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<form id="myForm" action="demo_insert.php" method="post">
   Name : <input type="text" name="name"><br />
    Email : <input type="text" name="email"><br />
    Domain : <input type="text" name="domain"><br />
    Role : <input type="text" name="role"><br />
    <button type="submit" id="sub">Save</button>
</form>
<span id="result"></span>

关于javascript - JQUERY + PHP + AJAX 不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35986054/

相关文章:

javascript - 如何在结束 body 标签后创建一个元素

javascript - jQuery UI removeClass 不显示动画

javascript - 浏览器 JavaScript mousedown 事件 : To detect right mouse button: Do I look at "button" or "which"?

javascript - 使用 INPUT 标签的 VALUE 属性(及其值)读取 HTML 表单的 innerHTML

javascript - 如何在Select2 4.0.6-rc.1 full中用js改变背景颜色

php - SwiftMailer、PhpMailer 等 : Difference between mail() and sendmail

php - 如何从 CakePHP 列表数组返回一个值以在表单中使用?

javascript - 在 iPad 上捕获 Click on DOM/HTML/BODY 事件

javascript - 下载 npm dist 包,无需安装 npm

php - 用html阵营解析mysql到xml