dongxuanjiao0795 2016-03-14 11:17
浏览 37
已采纳

JQUERY + PHP + AJAX无法正常工作

I am developing simple program in html which inserts the data into MySQL DB using php script. But every time I press Save button it redirects me to php page. I have created Javascript file but its not working for me. Please help

HTML FILE (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 file

<?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 File

$("#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('');
    });
}
  • 写回答

4条回答 默认 最新

  • doutangtan6386 2016-03-14 11:25
    关注

    Replace 

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

    with 

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

    As this method "Encode a set of form elements as an array of names and values."

    $("#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>

    </div>
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(3条)

报告相同问题？

悬赏问题

  • ¥15 对接wps接口实现获取元数据
  • ¥20 给自己本科IT专业毕业的妹m找个实习工作
  • ¥15 用友U8：向一个无法连接的网络尝试了一个套接字操作，如何解决？
  • ¥30 我的代码按理说完成了模型的搭建、训练、验证测试等工作(标签-网络|关键词-变化检测)
  • ¥50 mac mini外接显示器 画质字体模糊
  • ¥15 TLS1.2协议通信解密
  • ¥40 图书信息管理系统程序编写
  • ¥20 Qcustomplot缩小曲线形状问题
  • ¥15 企业资源规划ERP沙盘模拟
  • ¥15 树莓派控制机械臂传输命令报错，显示摄像头不存在