在對話框中提交表單而無需使用jQuery/ajax/php回發

Question

好吧，我試圖提交沒有頁面刷新（或回發）的地址信息。我不斷收到「意外的輸入結束」，我不確定我在這裏做錯了什麼。這對我來說都是新事物，如果有任何錯誤，我們都會很抱歉！

已更新已更新的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> 

Answer 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輸出JSON而不是文本使用header('Content-Type: application/json');

在JS端的響應，你可以在這兩個函數中使用的console.log，看看服務器返回

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