使用jquery / ajax / php在没有回发的对话框中提交表单

时间:2014-12-02 17:11:11

标签: php jquery ajax

好的,所以我试图在没有页面刷新(或回发)的情况下提交地址信息。我不断得到“意外的输入结束”,我不确定我在这里做错了什么。这对我来说是全新的,如果有没有错误就很抱歉!

更新更新了PHP,见下文。通过以下更改仍然意外结束输入错误。

jQuery代码:

        $( "#ChangeAddressDialog" ).dialog({
            width:500,
            modal:true,
            closeOnEscape:true,
            buttons: [ 
                { text: "Ok", type: "submit", click: function() { 
                        $.ajax({
                            url: "classes/add-address.php",
                            timeout: 30000,
                            type: "POST",
                            data: $("#main_form").serialize(),
                            dataType: 'json',
                            error: function(SMLHttpRequest, textStatus, errorThrown){
                                alert("An error has occurred making the request. " + errorThrown);
                            },
                            success: function(data){
                                //do stuff here on success such as modal info
                                //$("#main_form").submit();
                                alert('Address change information has been successfully submitted.');
                                $(this).dialog("close");
                            }
                        });
                    }
                },
                { text: "Close", click: function() { $(this).dialog( "close" ); } } ]
        });
    });

PHP代码:更新

<?php
require_once('../config.php');

$sqlCheck = ''; 
$parcel_id = isset($_POST['ParcelId']) ? $_POST['ParcelId'] : null;
$address1 = isset($_POST['Address1']) ? $_POST['Address1'] : null;
$address2 = isset($_POST['Address2']) ? $_POST['Address2'] : null;
$city = isset($_POST['City']) ? $_POST['City'] : null;
$state = isset($_POST['State']) ? $_POST['State'] : null;
$zip = isset($_POST['Zip']) ? $_POST['Zip'] : null;
$country = isset($_POST['Country']) ? $_POST['Country'] : null;

$db = new ezSQL_mysql(DB_USER, DB_PASSWORD, DB_NAME, DB_HOST);
$result = $db->query("INSERT INTO change_of_address (parcel_id, address_1, address_2, City, State, Zip, Country) VALUES ('" . $parcel_id . "','" . $address1 . "','" . $address2 . "','" . $city . "','" . $state . "','" . $zip . "','" . $country . "')");
if ($result == 1) {
    echo true;
} else {
    echo false;
}



?>

编辑:对于S.Pols

<script>
    $(document).ready(function() {
        $('#column-chooser').hide();
        $('#CommentsDialog').hide();
        $('#ChangeAddressDialog').hide();
        $('#HelpDialog').hide();
        $('#ExportDialog').hide();
        $("#SearchButton").click(function() { window.location.href = '/?s=' + $("#search").val(); });   
        $('#searchTable tr').click(function(){
            var parcel_id = $(this).attr('id');
            $('#ParcelId').val(parcel_id);
            $.ajax({
                url: "classes/get-apn.php?id=" + parcel_id,
                type: "GET",
                data: { parcel_id : parcel_id },
                dataType: 'json',
                error: function(SMLHttpRequest, textStatus, errorThrown){
                    alert("An error has occurred making the request: " + errorThrown);
                },
                success: function(data){
                    //do stuff here on success
                    $('#ParcelNumber').html(data[0]["apn"]);
                    //$('#ViewComments').html('Veiw ' + count + ' Comments');
                }
            });
        });

    });//end document ready function

    /*$('#dataTable').DataTable({
        "searching": false,
        "lengthChange": false,
        "scrollY": "300px",
        "scrollCollapse": true,
        "paging": false,
        "info": false
    });*/
    $( "#AddComment" )
        .button()
        .click(function( event ) {
        e.preventDefault();
    });
    $('#ShowColumnChooser').click(function() {
        //show/hide div
        $('#column-chooser').slideToggle('slow');
    });
    $('#Help').click(function() {
        //help dialog box
        $( "#HelpDialog" ).dialog({
            width: 500,
            modal:true,
            closeOnEscape:true,
            buttons: [ { text: "Close", click: function() { $(this).dialog( "close" ); } } ]
        });
    });
    $('#Export').click(function() {
        //export options dialog
        $( "#ExportDialog" ).dialog({
            width: 500,
            modal:true,
            closeOnEscape:true,
            buttons: [ { text: "Close", click: function() { $(this).dialog( "close" ); } } ]
        });
    });
    $('#ViewComments').click(function() {
        //view/add comments dialog
        $( "#CommentsDialog" ).dialog({
            height:300,
            width: 500,
            modal:true,
            closeOnEscape:true,
            buttons: [ { text: "Close", click: function() { $(this).dialog( "close" ); } } ]
        });
        $("#InsertComment").focus();
    });//end view comments click function

    $('#ChangeOfAddress').click(function() {
        //change of address dialog
        $('#change_of_address_form').val('1');
        $( "#ChangeAddressDialog" ).dialog({
            width:500,
            modal:true,
            closeOnEscape:true,
            buttons: [ 
                { text: "Ok", type: "submit", click: function() { 
                        $.ajax({
                            url: "classes/add-address.php",
                            type: "POST",
                            data: $("#main_form").serialize(),
                            dataType: 'json',
                            error: function(SMLHttpRequest, textStatus, errorThrown){
                                alert("An error has occurred making the request: " + errorThrown)
                            },
                            success: function(result){
                                //do stuff here on success such as modal info
                                $("#main_form").submit();
                                $(this).dialog("close");
                            }
                        })
                    } 
                },
                { text: "Close", click: function() { $(this).dialog( "close" ); } } ]
        });
    });
    $(function() {
        $('#datepicker1,#datepicker2,#datepicker3,#datepicker4').datepicker({
            showOn: 'both',
            buttonImage: 'images/calendar.png',
            buttonImageOnly: true,
            buttonText: 'Select Date'
        });
    });
</script>

1 个答案:

答案 0 :(得分:1)

您没有回复PHP脚本中的内容。

$result = $db->query( ... );

我不熟悉ezSQL_mysql但它应该返回一个对象或一个数组,然后你应该回应它,如:

if ($result){
    echo 'true'; // or 1, or '{"success': 'ok'}
}else{
    echo 'false'; // or 0, or '"success': 'error'}
}

header('Content-Type: application/json');
echo json_encode($result);  // if $result is an associative array

尝试从浏览器调用php脚本,并使用更符合您需求的响应。鉴于您将在javascript中使用响应,json响应是您可以使用的最佳响应。一定要告诉php使用header('Content-Type: application/json');

将响应输出为json而不是text

在js方面,您可以在两个函数中使用console.log来查看服务器返回的内容

success: function(data){
    console.log(data);
    // do your stuff here
}