提交表單而不刷新頁面與jQuery和Ajax不更新MySQL數據庫

Question

我是JQuery的新手，並有一個問題，當我點擊表單上的提交按鈕一切都表示註冊成功，但我的MYSQL數據庫未更新一切工作正常，直到我試圖添加JQuery的圖片。

有人可以幫我解決這個問題，所以我的數據庫更新？

謝謝

這裏是JQuery代碼。

$(function() { 

$(".save-button").click(function() { 
    var address = $("#address").val(); 
    var address_two = $("#address_two").val(); 
    var city_town = $("#city_town").val(); 
    var state_province = $("#state_province").val(); 
    var zipcode = $("#zipcode").val(); 
    var country = $("#country").val(); 
    var email = $("#email").val(); 

    var dataString = 'address='+ address + '&address_two=' + address_two + '&city_town=' + city_town + '&state_province=' + state_province + '&zipcode=' + zipcode + '&country=' + country + '$email=' + email; 

    if(address=='' || address_two=='' || city_town=='' || state_province=='' || zipcode=='' || country=='' || email=='') { 
     $('.success').fadeOut(200).hide(); 
     $('.error').fadeOut(200).show(); 
    } 

    else 
    { 
    $.ajax({ 
    type: "POST", 
    url: "http://localhost/New%20Project/home/index.php", 
    data: dataString, 
    success: function(){ 
    $('.success').fadeIn(200).show(); 
    $('.error').fadeOut(200).hide(); 

    } 
}); 
    } 

    return false; 

    }); 
}); 

這裏是PHP代碼。

if (isset($_POST['contact_info_submitted'])) { // Handle the form. 

    // Query member data from the database and ready it for display 
    $mysqli = mysqli_connect("localhost", "root", "", "sitename"); 
    $dbc = mysqli_query($mysqli,"SELECT users.*, contact_info.* 
           FROM users 
           INNER JOIN contact_info ON contact_info.user_id = users.user_id 
           WHERE users.user_id=3"); 

    $user_id = mysqli_real_escape_string($mysqli, htmlentities('3')); 
    $address = mysqli_real_escape_string($mysqli, htmlentities($_POST['address'])); 
    $address_two = mysqli_real_escape_string($mysqli, htmlentities($_POST['address_two'])); 
    $city_town = mysqli_real_escape_string($mysqli, htmlentities($_POST['city_town'])); 
    $state_province = mysqli_real_escape_string($mysqli, htmlentities($_POST['state_province'])); 
    $zipcode = mysqli_real_escape_string($mysqli, htmlentities($_POST['zipcode'])); 
    $country = mysqli_real_escape_string($mysqli, htmlentities($_POST['country'])); 
    $email = mysqli_real_escape_string($mysqli, strip_tags($_POST['email'])); 


//If the table is not found add it to the database 
if (mysqli_num_rows($dbc) == 0) { 
     $mysqli = mysqli_connect("localhost", "root", "", "sitename"); 
     $dbc = mysqli_query($mysqli,"INSERT INTO contact_info (user_id, address, address_two, city_town, state_province, zipcode, country, email) 
            VALUES ('$user_id', '$address', '$address_two', '$city_town', '$state_province', '$zipcode', '$country', '$email')"); 
} 



//If the table is in the database update each field when needed 
if ($dbc == TRUE) { 
     $dbc = mysqli_query($mysqli,"UPDATE contact_info 
            SET address = '$address', address_two = '$address_two', city_town = '$city_town', state_province = '$state_province', zipcode = '$zipcode', country = '$country', email = '$email' 
            WHERE user_id = '$user_id'"); 
} 


if (!$dbc) { 
     // There was an error...do something about it here... 
     print mysqli_error($mysqli); 
     return; 
} 

} 

這裏是XHTML代碼。

<form method="post" action="index.php"> 
    <fieldset> 
     <ul> 
      <li><label for="address">Address 1: </label><input type="text" name="address" id="address" size="25" class="input-size" value="<?php if (isset($_POST['address'])) { echo $_POST['address']; } else if(!empty($address)) { echo $address; } ?>" /></li> 
      <li><label for="address_two">Address 2: </label><input type="text" name="address_two" id="address_two" size="25" class="input-size" value="<?php if (isset($_POST['address_two'])) { echo $_POST['address_two']; } else if(!empty($address_two)) { echo $address_two; } ?>" /></li> 
      <li><label for="city_town">City/Town: </label><input type="text" name="city_town" id="city_town" size="25" class="input-size" value="<?php if (isset($_POST['city_town'])) { echo $_POST['city_town']; } else if(!empty($city_town)) { echo $city_town; } ?>" /></li> 
      <li><label for="state_province">State/Province: </label> 
      <?php 

      echo '<select name="state_province" id="state_province">' . "\n"; 
       foreach($state_options as $option) { 
       if ($option == $state_province) { 
        echo '<option value="' . $option . '" selected="selected">' . $option . '</option>' . "\n"; 
       } else { 
        echo '<option value="'. $option . '">' . $option . '</option>'."\n"; 
       } 
       } 
      echo '</select>'; 

      ?> 
      </li> 

      <li><label for="zipcode">Zip/Post Code: </label><input type="text" name="zipcode" id="zipcode" size="5" class="input-size" value="<?php if (isset($_POST['zipcode'])) { echo $_POST['zipcode']; } else if(!empty($zipcode)) { echo $zipcode; } ?>" /></li> 

      <li><label for="country">Country: </label> 
      <?php 

      echo '<select name="country" id="country">' . "\n"; 
       foreach($countries as $option) { 
       if ($option == $country) { 
        echo '<option value="' . $option . '" selected="selected">' . $option . '</option>' . "\n"; 
       } 
       else if($option == "-------------") { 
        echo '<option value="' . $option . '" disabled="disabled">' . $option . '</option>'; 
       } 
       else { 
        echo '<option value="'. $option . '">' . $option . '</option>'."\n"; 
       } 
       } 
      echo '</select>'; 

      ?> 
      </li> 

      <li><label for="email">Email Address: </label><input type="text" name="email" id="email" size="25" class="input-size" value="<?php if (isset($_POST['email'])) { echo $_POST['email']; } else if(!empty($email)) { echo $email; } ?>" /><br /><span>We don't spam or share your email with third parties. We respect your privacy.</span></li> 

      <li><input type="submit" name="submit" value="Save Changes" class="save-button" /> 
       <input type="hidden" name="contact_info_submitted" value="true" /> 
      <input type="submit" name="submit" value="Preview Changes" class="preview-changes-button" /></li> 
     </ul> 
    </fieldset> 

</form> 

Answer 1

您應該考慮重構代碼嗎？ 我可以清理你的代碼else塊這裏是你的代碼

else 
{ 
    $.load(
      "http://localhost/New%20Project/home/index.php",dataString, 
      function() 
      { 
      $('.success').fadeIn(200).show(); 
      $('.error').fadeOut(200).hide(); 
      } 
     ); 
} 

Answer 2

把你所有的jQuery內

$（文件）。就緒（函數（）{// 這裏evething }） ;

在表單上放置一個id。例如id =「myform」。

使用plug-in進行表單驗證。要使用插件將class =「放入所有必填字段的輸入標籤中」。

驗證插件的文檔是here，因此您可以看到哪個選項適合您的需求。但是，它看起來像你想要設置submit handler to submit the form via AJAX。

$("#myform").validate({ 
    submitHandler: function(form) { 
    $(form).ajaxSubmit(); 
    } 
}) 

這應該有希望解決您的jQuery問題，如果它適用於常規提交，那麼您的服務器端代碼沒有問題。

Answer 3

$dbc = mysqli_query($mysqli,"SELECT users.*, contact_info.* 
          FROM users 
          INNER JOIN contact_info ON contact_info.user_id = users.user_id 
          WHERE users.user_id=3"); 


if ($dbc == TRUE) { 
     $dbc = mysqli_query($mysqli,"UPDATE contact_info 
            SET address = '$address', address_two = '$address_two', city_town = '$city_town', state_province = '$state_province', zipcode = '$zipcode', country = '$country', email = '$email' 
            WHERE user_id = '$user_id'"); 
} 

mysql（i）_query將永遠不會返回true，它只會在成功時返回資源，或者在失敗時返回FALSE。

這可能是更多，你正在試圖做

if ($dbc !== FALSE) { 
    // do update query 

Answer 4

而不是$ .load嘗試$不用彷徨什麼，因爲負載彪像$環境（'＃result_of_query）.load（使用...）結果將被加載到'#result_of_query'，即時假設它看起來像一個重載因此。

所以也許你應該試試這個：

else 
{ 
    $.get(
      "http://localhost/New%20Project/home/index.php",dataString, 
      function() 
      { 
      $('.success').fadeIn(200).show(); 
      $('.error').fadeOut(200).hide(); 
      } 
     ); 
}