Question

我是网络编程的新手，我正在创建一个网站在这个网站上，我想在页面的页脚中添加一个联系我们表格，如下

<form action="footer_contactus1.php" method="post">
  <div class="row">
    <div class="form-grope col-lg-4">
      <label><span class="glyphicon glyphicon-user"></span>Name</label><br>
      <input name="cuname" type="text" class="form-cotrol">
    </div>
    <div class="form-grope col-lg-4">
      <label><samp class="glyphicon glyphicon-envelope"></samp>Email</label><br>
      <input name="cuemail" type="email" class="form-cotrol">
    </div>
    <div class="form-grope col-lg-4">
      <label><i class="glyphicon glyphicon-earphone"></i>Phone Number</label><br>
      <input name="cutele" type="tel" class="form-cotrol">
    </div>

    <div class="form-grope col-lg-12">
    <br>
      <label><span class="glyphicon glyphicon-paste"></span>Message</label><br>
      <textarea name="cumessage" class="form-cotrol" rows="6" style="width: 100%;" ></textarea>
    </div>
    <div class="form-grope col-lg-12">
    <br>
      <input type="hidden" name="save" value="contact">
      <button type="submit" class="btn btn-info">Submit</button>
    </div>
  </div>
</form>

当我点击提交按钮时，我想要执行php文件，以便将输入插入到数据库中 php文件

<?php

$pdo = new PDO('mysql:host=localhost;dbname=mywsite_db', 'root', '');

$req = $pdo->prepare('INSERT INTO message (id_message,nom,email,tele,message)
VALUES(null,?,?,?,?)');
$req->execute(array($_POST['cuname'],$_POST['cuemail'],$_POST['cutele'],$_POST['cumessage']));

header('Location: HomePage.php');

?>

我希望这个表单能够在不通过ajax刷新页面的情况下进行提交我尝试了不同的教程，没有任何工作可以你plzz给我我的表格的正确的ajax脚本，所以我可以将它提交到php文件并在数据库中插入数据然后弹出一条消息（警报）告诉我数据已经不刷新页面plzz

Answer 1

<form action="footer_contactus1.php" method="post" id="myForm1">
    ...
</form>

<script type="text/javascript">
    var frm = $('#myForm1');
    frm.submit(function (ev) {
        $.ajax({
            type: frm.attr('method'),
            url: frm.attr('action'),
            data: frm.serialize(),
            success: function (data) {
                alert('The data has been inserted');
            }
        });

        ev.preventDefault();
    });
</script>

提交表单时不要刷新页面

1 个答案: