jQuery Mobile Ajax表单提交/将数据插入MySQL DB

时间:2014-03-02 21:22:21

标签: php mysql ajax jquery-mobile

我遇到了来自我的表单的$ _POST数组的问题。

以下是我的表单的代码:

<form id="form-add-client" method="post" data-ajax="false">

    <input type="text" name="companyName" id="companyName" value="" placeholder="Company Name" />
    <input type="text" name="email" id="email" value="" placeholder="Email" />

    <br />

    <input type="text" name="firstName" id="firstName" value="" placeholder="First Name" />
    <input type="text" name="lastName" id="lastName" value="" placeholder="Last Name" />
    <input type="tel" name="workPhone" id="workPhone" value="" placeholder="Work Phone" />
    <input type="tel" name="mobilePhone" id="mobilePhone" value="" placeholder="Mobile Phone" />

    <br />

    <input type="text" name="streetAddress" id="streetAddress" value="" placeholder="Street Address" />
    <input type="text" name="city" id="city" value="" placeholder="City" />
    <input type="text" name="postalCode" id="postalCode" value="" placeholder="Postal Code" />

    <br />

    <input type="button" data-theme="b" name="submit" id="submit-add-client" value="Add Client" />

</form>

这是jQuery ajax代码:

// Add Client
$(document).on('pagebeforeshow', '#add-client', function(){  
    $(document).on('click', '#submit-add-client', function() { // catch the form's submit event
        if($('#companyName').val().length > 0 && $('#email').val().length > 0){
            // Send data to server through the ajax call
            // action is functionality we want to call and outputJSON is our data

                // fetch the data for the form
                var data = $('#form-add-client').serialize();

                $.ajax({url: 'http://www.website.co.nz/goflowdata/addclient.php',
                    data: data,
                    type: 'post',                   
                    async: 'true',
                    dataType: 'json',
                    beforeSend: function() {
                        // This callback function will trigger before data is sent
                        $.mobile.loading('show'); // This will show ajax spinner
                    },
                    complete: function() {
                        // This callback function will trigger on data sent/received complete
                        $.mobile.loading('hide'); // This will hide ajax spinner
                    },
                    success: function (result) {
                        if(result.status) {
                            $.mobile.changePage("#add-client-success");                         
                        } else {
                            alert('Add client unsuccessful!'); 
                        }
                    },
                    error: function (request,error) {
                        // This callback function will trigger on unsuccessful action                
                        alert('Network error has occurred please try again!');
                    }
                });                   
        } else {
            alert('Please fill all necessary fields');
        }           
        return false; // cancel original event to prevent form submitting
    });    
});

以下是addclient.php文件中的代码:

<?php

header("Access-Control-Allow-Origin: *");

require_once("debug/chromephp.php");

$formData = $_POST;

ChromePhp::log($_POST);

require_once("config.php");

$companyName = $formData['companyName'];
$email = $formData['email'];
$firstName = $formData['firstName'];
$lastName = $formData['lastName'];
$workPhone = $formData['workPhone'];
$mobilePhone = $formData['mobilePhone'];
$streetAddress = $formData['streetAddress'];
$city = $formData['city'];
$postalCode = $formData['postalCode'];

$sql="INSERT INTO clients (companyName, email, firstName, lastName, workPhone, mobilePhone, streetAddress, city, postalCode) VALUES ('$companyName', '$email', '$firstName', '$lastName', '$workPhone', '$mobilePhone', '$streetAddress', '$city', '$postalCode')";

$result = mysql_query($sql);

if($result) {

    // Success
    $output = array('status' => true, 'massage' => 'Success!');
    echo json_encode($output);

} else {

    // Failed
    $output = array('status' => false, 'massage' => 'Failed!');
    echo json_encode($output);

}

?>

我的问题是$ formData ['postalCode'];变量。这似乎很简陋。我使用ChromePHP尝试调试问题,它在通过ajax发布之前返回表单数据。在序列化字符串中,postalCode就在那里,您可以在下面看到控制台截图。谁能明白为什么会这样?非常感谢任何帮助。

当我使用ChromePHP将$ _POST的内容记录到控制台时,我得到了两次:

 Object {companyName: "TestCompany", email: "test@email.com", firstName: "John", lastName: "Doe", workPhone: "01234567"…} city: "Testcity" companyName: "TestCompany" email: "test@email.com" firstName: "John" lastName: "Doe" mobilePhone: "012345678" postalCode: "" streetAddress: "7 Test Street" workPhone: "01234567" proto: Object

截图:

MySQL表格行的屏幕截图:

控制台记录变量的屏幕截图:

0 个答案:

没有答案