HTML

        <form method="post" class="contact-form" id="register-form">
            <fieldset> 
                <input type="text" name="first_name" placeholder="First Name" class="col-xs-12 col-sm-12 col-lg-12 input-text" id="firstName" required>

                <input type="text" name="last_name" placeholder="Last Name" class="col-xs-12 col-sm-12 col-lg-12 input-text" id="lastName" required>

                <input type="text" name="location_preference" placeholder="Location Preference" class="col-xs-12 col-sm-12 col-lg-12 input-text" id="locationPreference" required>

                    <select name="internType" style="width: 100%; display: block; color: #000;" id="internType" required>
                        <option selected="" value="default">Please Select</option>
                        <option value="inside">Inside</option>
                        <option value="outside">Outside</option>
                        <option value="open">Open</option>
                    </select>
                <button name="submit" type="submit" class="btn btn-success submitinformation pull-right" id="submit"> Submit</button>
                <button name="reset" type="reset" class="btn btn-success submitinformation pull-right" id="reset"> Reset</button>

            </fieldset> 
        </form>

非常基本..

的JavaScript

    var PATH =  'processor.php';
    var APP = 'wse01010';

    $("#register-form").on("submit", function(e){
    e.preventDefault();

        var errors = 0;
        var inputs = $('input:text, #internType'); 

            $(inputs).map(function(){
                if( !$(this).val() || $(this).val() == "default") {
                  $(this).addClass('warning'); //Add a warning class for inputs if Empty
                  errors++;
            } else if ($(this).val()) {
                  $(this).removeClass('warning');
            }   
            });

    var formData = $(this).serialize();
    console.log(formData);
    //console.log($(this)[0]);
    //var formData = new FormData( $(this)[0] );
    //console.log(formData);

            if(errors < 1) {
            // If no errors, send POST
                $.ajax({
                    url: PATH + '?i=' + APP,
                    type: 'POST',
                    data: formData,   
                    async: true,
                    success: function (data) {
                    alert("Success");
                },
                    error: function(xhr, textStatus, errorThrown){
                           alert('Request failed. Please try again.');
                        }

                });
            }

    });

每次都会提醒Success。

PHP

$firstName = $_POST['first_name'];

        if( !isset( $_POST['first_name'] ) ) {
        var_dump($_POST);  // This gives me an empty array: array(0) { }
                $outcomeArr = array(
                                        'outcome'=>'failure',
                                        'message'=>'Step 1 failed.'
                                    );
            echo json_encode( $outcomeArr );
            exit();
        }

        unset( $_POST['submit'] );

        $postVar = print_r($_POST,true);
        //Other code omitted

这里是如何传递数据的。

enter image description here

我不确定如何将表单数据格式化为正确的格式（如果这是问题），或者为什么PHP无法识别我的POST。我也不确定我应该做些什么来验证POST。

这是最终为我工作的JavaScript

var form_processor = {

settings : {
    'outcome' : -1,
    'status' : 0, // 0 == correct, 1 == errors detected
    'error_msg' : '',
    'path' : 'processor.php',
    'app' : 'wse01010'
},


sendData : function(formData){
    var self = this;
            $.ajax({
                        url: self.settings.path + '?i=' + self.settings.app ,  
                        type: 'POST',
                        data: formData,   
                        async: true,
                        success: function (data) {
                            toastr.success('Your request went through!', "Success")
                        },
                        error: function(xhr, textStatus, errorThrown){
                           toastr.error("Something went wrong. Please try again.", "Error!")
                        },
                        cache: false,
                        contentType: false,
                        processData: false
            });
},

bindForm : function(){
    var self = this;
    $('.contact-form').submit(function(e){
        self.settings.formObj = $(e.target);

        e.preventDefault();

        var errors = 0;
        var inputs = $('input:text, #internType'); 

        $(inputs).map(function(){
                if( !$(this).val() || $(this).val() == "default") {
                  $(this).addClass('warning'); //Add a warning class for inputs if Empty
                  errors++;
            } else if ($(this).val()) {
                  $(this).removeClass('warning');
            }   
        });

        if( errors > 0 ) {  
            self.settings.status = 0;
            self.settings.error_msg = '';   
            toastr.error("Please fill in all of the fields.", "Error!")             
            return false
        } else {
            formData = new FormData( $(this)[0] );
            self.sendData(formData);
        }
    });
},
init : function(){
    this.bindForm();
}
}
form_processor.init();

Answer 1

在PHP中，您可以从这开始：

echo "1";

使用AJAX时，echo与return相同，因此这是您的功能停止的地方。删除所有不必要的echo，否则您的功能将无法继续。

此外，您在HTML名称属性中使用空格：

<input type="text" name="first name"> <!-- Incorrect -->

请改用下划线，否则您将无法正确检索该值：

<input type="text" name="first_name"> <!-- Correct -->

之后，$firstName = $_POST["first_name"];是在PHP中检索值的正确方法。

Answer 2

我建议不要在名称中使用空格，因此请在名字等中更改。

序列化你需要这个。

$(function() {
    $('#register-form').on('submit', function(e) {
        var data = $("#register-form").serialize();
        $.getJSON("http://YOUR PHP FILE TO CATCH IT &",data)
                  });
});

例如，在你的php页面上使用$ _GET ['firstname']并将其添加到变量中。

Answer 3

您的代码正在设置表单的内容类型两次，并且两次都不正确：

从enctype="multipart/form-data"标记中删除<form>。（这是用于文件上传）
从jQuery contentType: "application/json; charset=utf-8"调用中删除ajax()。（这适用于JSON，PHP本身并不理解）

正确的编码为application/x-www-form-urlencoded，这是<form>代码和ajax()来电的默认值。

将表单数据序列化为PHP

HTML

的JavaScript

PHP

3 个答案: