【问题标题】:form submit using ajax php使用ajax php提交表单
【发布时间】:2017-05-22 05:24:27
【问题描述】:

使用 ajax 提交简单的联系表单。

编辑的代码 现在尝试将数据插入数据库。

html 表单

        <form align="left" method="post" class="subscribe_form" action='subscribe.php'> 

                    Your Name:<br>
  <input type="text" name="name" value="" required><br>

Your E-Mail:<br>
  <input type="email" name="email" value="" required><br><br>

  Gender:
  <p>    <input name="gender" value="male" type="radio" id="male" />
      <label for="male">Male</label>

      <input name="gender" value="female" type="radio" id="female" />
      <label for="female">Female</label>
    </p>
<br>

Company Name:
<input type="text" name="cname" value="" required><br><br>
<input type="submit" name="send" value="Subscribe" id="subscribe"> <span class="output_result"></span>
</form>

这是我的 ajax 代码:

    <script>

$(document).ready(function() {
    $('.subscribe_form').on('submit',function(){

        // Add text 'loading...' right after clicking on the submit button. 
        $('.output_result').text('Sending...'); 

        var form = $(this);
        $.ajax({
            type:'post',
            url:'subscribe.php',
            dataType: "text",
            data: form.serialize(),
            success: function(result){
                if (result == 'success'){
                    $('.output_result').text('thank you!');  
                } else {
                    $('.output_result').text('Error!');
                }
            }
        });

        // Prevents default submission of the form after clicking on the submit button. 
        return false;   
    });
}); 
</script>

subscribe.php

$servername = "localhost";
$username = "root";
$password = "";
$dbname = "rm";

    $name = $_POST['name'];
    $gender = $_POST['gender'];
    $email = $_POST['email'];
    $cname = $_POST['cname'];
    $sub_date = date("Y-m-d");



// Create connection
$conn = mysqli_connect($servername, $username, $password, $dbname);
// Check connection
if (!$conn) {
    die("Connection failed: " . mysqli_connect_error());
}

$sql = "insert into rmsubscribe (name, gender, email, cname, sub_date) values ('$name', '$gender','$email','$cname','$sub_date')";
$result = (mysqli_query($conn, $sql));

echo ($result) ? 'success' : 'error'; */

mysqli_close($conn);

此代码给我“错误消息”。

如果我不使用这样的 ajax 代码,

在表格中,

没有 'class="subscribe_form"..

并在 subscribe.php 中

 if (mysqli_query($conn, $sql)) {
    echo "New record created successfully";
} else {
    echo "Error: " . $sql . "<br>" . mysqli_error($conn);
} 

而不是这个

$result = (mysqli_query($conn, $sql));
echo ($result) ? 'success' : 'error'; 

它工作正常。 '新记录创建成功'数据插入到表中。

请帮助我处理 ajax 代码。我不熟悉ajax。如何使用 ajax 完成这项工作?

【问题讨论】:

  • 能否请您也出示一下您的 email.php 文件,看看它返回给 ajax 请求的内容。
  • $send_email = mail($to,$subject,$message,$headers);回声($send_email)? '成功' : '错误';
  • 您能否尝试将数据类型添加到 ajax 请求。我认为从 email.php 返回时无法识别数据类型的 ajax 请求。尝试在此行数据之后添加 - 数据类型:“文本”到 ajax 请求:form.serialize(),
  • 我认为 ajax 期望 json 作为结果数据,而您返回的“成功”不是 json。请检查这是否对您有帮助
  • 好的。但我首先怀疑 email.php 是否正在调用?!回声$名称;回显$电子邮件;不打印任何。但是当我在没有脚本和 email.php 的情况下只使用这个“
    ”时 - echo $name;回显$电子邮件;显示姓名和电子邮件。

标签: php ajax forms


【解决方案1】:

我认为您需要在 ajax 请求中添加数据类型。实际上,您的 ajax 请求需要 json 并且您正在返回文本 - “成功”不是 json,这就是为什么当它返回意外数据时,它会将 ajax 响应发送到错误函数。将您的代码更新为以下 ajax 请求 -

当您返回 Text 作为对 ajax 请求的响应时,因此您的 ajax 请求数据类型必须是文本,如下面的 ajax 请求中的代码行 -

dataType: "text"

预期的 Ajax 请求示例

 $.ajax({
            type:'post',
            url:'email.php',
            dataType: "text",
            data: form.serialize(),
            success: function(result){
                if (result == 'success'){
                    $('.output_message').text('Message Sent Successfully!');  
                } else {
                    $('.output_message').text('Error Sending email!');
                }
            }
        });

        // Prevents default submission of the form after clicking on the submit button. 
        return false;   
    });

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 2011-10-03
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2022-11-03
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多