2

所以，我按照这里的教程来提交一个带有 ajax 的表单。我完全按照教程进行（至少我认为我做到了），当我尝试提交表单时，页面会刷新，并且它永远不会到达 php 脚本以将其发送到数据库。

我正在使用的脚本如下：

$(function () {
$(".button").click(function () {
    $(function () {
        $('.error').hide();
        $("#submit_btn").click(function () {
            //validate and process form here

            $('.error').hide();
            var firstname = $("input#firstname").val();
            if (firstname == "") {
                $("label#firstname_error").show();
                $("input#firstname").focus();
                return false;
            }

            var lastname = $("input#lastname").val();
            if (lastname == "") {
                $("label#lastname_error").show();
                $("input#lastname").focus();
                return false;
            }

            var email = $("input#email").val();
            if (email == "") {
                $("label#email_error").show();
                $("input#email").focus();
                return false;
            }

            var pin = $("input#parent_pin").val();
            if (pin == "") {
                $("label#parent_pin_error").show();
                $("input#parent_pin").focus();
                return false;
            }

            var login = $("input#login").val();
            if (login == "") {
                $("label#login_error").show();
                $("input#login").focus();
                return false;
            }

            var passwd = $("input#passwd").val();
            if (passwd == "") {
                $("label#passwd_error").show();
                $("input#passwd").focus();
                return false;
            }

            var cpasswd = $("input#cpasswd").val();
            if (cpasswd == "") {
                $("label#cpasswd_error").show();
                $("input#cpasswd").focus();
                return false;
            }

            var user_type = $("input#user_type").val();
            if (user_type == "") {
                $("label#user_type_error").show();
                $("input#user_type").focus();
                return false;
            }

            var dataString = 'firstname=' + firstname + '&lastname=' + lastname + '&email=' + email + '&parent_pin=' + pin + '&login='
            login + '&passwd='
            passwd + 'user_type' = user_type;
            //alert (dataString);return false;
            $.ajax({
                type: "POST",
                url: "studentAccess/files/AddNewUser.php",
                data: dataString,
                success: function () {
                    $('#form-body').html("<div id='message'></div>");
                    $('#message').html("<h2>New User Added Successfully!</h2>");

                }
            });
        });
    });
  });
});

我在 Google Chrome 控制台中收到的错误是：

Uncaught SyntaxError: Unexpected identifier AddNewUser.js:65

第 65 行将是：

var dataString = 'firstname=' + firstname + '&lastname=' + lastname + '&email=' + email + '&parent_pin=' + pin + '&login=' login + '&passwd=' passwd + 'user_type' = user_type;

我不确定如何解决此问题，因为我不知道错误的含义。任何帮助都会很棒！

更新 

<?php
$con = mysqli_connect("");
// Check connection
if (mysqli_connect_errno()) {
    echo "Failed to connect to MySQL: " . mysqli_connect_error();
}

$sql = "INSERT INTO members (firstname, lastname, email, login, psswd, user_type)
VALUES
('$_POST[firstname]','$_POST[lastname]','$_POST[email]', '$_POST[login]', '$_POST[psswd]', '$_POST[user_type]')";

if (!mysqli_query($con, $sql)) {
    die('Error: ' . mysqli_error($con));
}
echo "1 record added";

mysqli_close($con);
?>
4

3 回答 3

1

您错过+了 #65 行中的符号

应该

var dataString = 'firstname=' + firstname + '&lastname=' + lastname + '&email=' + email + '&parent_pin=' + pin + '&login=' + login + '&passwd=' + passwd + '&user_type=' + user_type;

请阅读http://en.wikipedia.org/wiki/JavaScript_syntax

$(function () {在.button点击处理程序中删除。现在它只是在按钮单击时注册一个句柄但不执行它

于 2013-08-27T17:07:44.473 回答
1

在该行的最后，您有：

'user_type' = user_type;

它需要是：

'&user_type=' + user_type;

您可能还需要return false;在 ajax 之后添加以防止页面刷新（并清除您的表单）。

$.ajax({
    type: "POST",
    url: "studentAccess/files/AddNewUser.php",
    data: dataString,
    success: function () {
        $('#form-body').html("<div id='message'></div>");
        $('#message').html("<h2>New User Added Successfully!</h2>");
    }
});
return false; //Keep page from refreshing

进一步编辑：

您还.click()嵌入了一个.click(). 您不能同时单击两个按钮。你需要改变这个：

$(function () {
$(".button").click(function () {
    $(function () {
        $('.error').hide();
        $("#submit_btn").click(function () {

对这个……

$(function () {
    $('.error').hide();
    $("#submit_btn").click(function (e) {
        e.preventDefault();
        ...
于 2013-08-27T17:09:27.793 回答
0

在下面的行中，它应该'&user_type=' + user_type;代替'user_type' = user_type;

var dataString = 'firstname=' + firstname + '&lastname=' + lastname + '&email=' + email + '&parent_pin=' + pin + '&login=' login + '&passwd=' passwd + 'user_type' = user_type;

此外，如果按钮是submit按钮，则应防止在event.preventDefault();按钮click事件中使用默认表单提交操作。

此外，前两行代码不是必需的。我已将它们注释掉。

/*$(function () {
$(".button").click(function () {*/

    $(function () {
        $('.error').hide();
        $("#submit_btn").click(function (event) { 
            event.preventDefault();
            //rest of your current validation code should be put here.
        });
     });
于 2013-08-27T17:09:50.923 回答