Question

我正在尝试做this example -

之类的事情

我的form.html -

<html><head>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.0/jquery.min.js"></script>
 <script type="text/javascript" >
    $(function() {
        $("#Submit").click(function(e) {
            e.preventDefault();
            var contacttype = $("#contacttype").val();
            var name = $("#name").val();
            var email = $("#email").val();
            var phone = $("#phone").val();
            var comment = $("#comment").val();
            var dataString = 'name='+ name + '& email=' + email + '& phone=' + phone + '& comment=' + comment;

            if(name=='' || email=='' || phone=='' || comment=='' || contacttype=='Select')
            {
                $('.success').fadeOut(200).hide();
                $('.error').fadeIn(200).show();
            }
            else
            {
                $.ajax({
                    type: "POST",
                    url: "contact.php",
                    data: dataString,
                    success: function(){alert("GSM");
                        $('.success').fadeIn(200).show();
                        $('.error').fadeOut(200).hide();
                    }
                });
            }
            return false;
        });
    });
    </script>
    </head>
    <body>

<form action="" method="post" id="contact_form">
    <select id="contacttype" name="contactform">
        <option selected="selected" value="Select">Select</option>
        <option value="Franchisee">Franchisee</option>
        <option value="Enquiry">Enquiry</option>
        <option value="Feedback">Feedback</option>
        <option value="Complaint">Complaint</option>
    </select><br>
    <input type="text" name="name" placeholder="Name"><br>
    <input type="text" name="email" placeholder="Email"><br>
    <input type="text" name="phone" placeholder="Phone"><br>
    <textarea name="comment" placeholder="Comment"></textarea><br>
    <input type="submit" name="submit" id="Submit" >
    <span class="error" style="display:none"> Please Enter Valid Data</span>
    <span class="success" style="display:none"> Registration Successfully</span>
</form>

</body></html>

但代码url: "contact.php",似乎不起作用，因为我的数据库没有更新。

contact.php文件如下 -

<?php include("connect.php"); 


if($_POST)
{
    alert("1");
    $contacttype=$_POST['contacttype'];
    $name=$_POST['name'];
    $email=$_POST['email'];
    $phone=$_POST['comment'];
    $comment=$_POST['comment'];
    mysql_query("insert into `contact_form`(`type`, `name`, `email`, `phone`, `comment`) VALUES ($contacttype,$name,$email,$phone,$comment)");
}
else 
{ 
    alert("2");
}

?>

任何人都可以帮助我。我需要在不刷新html页面的情况下更新我的数据库。

Answer 1

您的AJAX代码似乎很好。请更正：

$contacttype=$_POST['contacttype'];

成：

$contacttype=$_POST['contactform'];

Answer 2

ajax帖子中缺少

“contacttype”字段

var dataString = 'name='+ name + '& email=' + email + '& phone=' + phone + '& comment=' + comment+'& contacttype=' + contacttype

在这些字段中缺少“id”属性

  <input type="text" name="name" placeholder="Name" id='name'><br>
    <input type="text" name="email" placeholder="Email" id='email'><br>
    <input type="text" name="phone" placeholder="Phone" id='phone'><br>
    <textarea name="comment" placeholder="Comment" id='comment'></textarea><br>

可能是type，name，email，phone，comment sql字段数据类型是varchar

       mysql_query("insert into `contact_form`
(`type`, `name`, `email`, `phone`, `comment`)
 VALUES ('$contacttype','$name','$email','$phone','$comment')");



if " phone " datatype is INT u can use 
('$contacttype','$name','$email',$phone,'$comment')

Answer 3

将contacttype添加到datastring

var dataString = 'contacttype='+ contacttype +'& name='+ name + '& email=' + email + '& phone=' + phone + '& comment=' + comment;

你也错过了在输入框中加入id，例如：

<input type="text" name="name" id="name" placeholder="Name">

并且也不要在php tag.just内部警告回显结果并在javascript中捕获它，例如：

        <?php include("connect.php");


    if($_POST)
    {

        $contacttype=$_POST['contacttype'];
        $name=$_POST['name'];
        $email=$_POST['email'];
        $phone=$_POST['comment'];
        $comment=$_POST['comment'];
        mysql_query("insert into `contact_form`(`type`, `name`, `email`, `phone`, `comment`) VALUES ($contacttype,$name,$email,$phone,$comment)");
    echo $name;
    }
    else
    {
        echo("not");
    }

    ?>

的javascript

$.ajax({
       type: "POST",
       url: "contact.php",
       data: dataString,
       success: function(data){
       alert(data);
       $('.success').fadeIn(200).show();
       $('.error').fadeOut(200).hide();
       }
                });
            }
            return false;

Answer 4

感谢各位的建议。我找到了解决方案。这是一些愚蠢的错误和一些错误的SQL语法的混合。

我的最终正确代码是这样的 -

form.html -

<html><head>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.0/jquery.min.js"></script>
<script type="text/javascript"> 
$(function() {
    $("#Submit").click(function(e) {
        e.preventDefault();
        var contacttype = $("#contacttype").val();
        var name = $("#name").val();
        var email = $("#email").val();
        var phone = $("#phone").val();
        var comment = $("#comment").val();
        var dataString = 'name='+ name + '& email=' + email + '& phone=' + phone + '& comment=' + comment;

        if(name=='' || email=='' || phone=='' || comment=='' || contacttype=='Select')
        {
            $('.success').fadeOut(200).hide();
            $('.error').fadeIn(200).show();
        }
        else
        {
            $.ajax({
                type: "POST",
                url: "contact.php",
                success: function(){
                    $('#form').fadeOut(200).hide();
                    $('.success').fadeIn(200).show();
                    $('.error').fadeOut(200).hide();
                }
            });
        }
        return false;
    });
});
</script>
</head>
<body>

<form action="contact.php" method="post" id="contact_form">
    <select id="contacttype" name="contacttype">
        <option selected="selected" value="Select">Select*</option>
        <option value="Franchisee">Franchisee</option>
        <option value="Enquiry">Enquiry</option>
        <option value="Feedback">Feedback</option>
        <option value="Complaint">Complaint</option>
    </select><br>
    <input type="text" id="name" name="name" placeholder="Name*"><br>
    <input type="text" id="email" name="email" placeholder="Email*"><br>
    <input type="text" id="phone" name="phone" placeholder="Phone*"><br>
    <textarea name="comment" placeholder="Comment*"></textarea><br>
    <input type="submit" name="submit" id="Submit" >
</form>

</body></html>

contact.php

if($_POST)
{
    $contacttype=$_POST['contacttype'];
    $name=$_POST['name'];
    $email=$_POST['email'];
    $phone=$_POST['phone'];
    $comment=$_POST['comment'];
    mysqli_query($connection,"insert into `contact_form`(`type`, `name`, `email`, `phone`, `comment`) VALUES ('$contacttype','$name','$email','$phone','$comment')");
    echo "insert into `contact_form`(`type`, `name`, `email`, `phone`, `comment`) VALUES ('$contacttype','$name','$email','$phone','$comment')";
}
else 
{ 
}

?>

Answer 5

$("#contact_form").submit(){
var contacttype = $("#contacttype").val();
            var name = $("#name").val();
            var email = $("#email").val();
            var phone = $("#phone").val();
            var comment = $("#comment").val();
            var dataString = 'name='+ name + '& email=' + email + '& phone=' + phone + '& comment=' + comment;

            if(name=='' || email=='' || phone=='' || comment=='' || contacttype=='Select')
            {
                $('.success').fadeOut(200).hide();
                $('.error').fadeIn(200).show();
            }
            else
            {
                $.ajax({
                    type: "POST",
                    url: "contact.php",
                    data: dataString,
                    success: function(){alert("GSM");
                        $('.success').fadeIn(200).show();
                        $('.error').fadeOut(200).hide();
                    }
                });
            }
            return false;
});

使用jQuery和Ajax提交不刷新页面的表单

5 个答案: