2017-02-10 99 views
0

首先,讓我說我剛開始學習Web開發的基本知識 - HTML,CSS,JavaScript和PHP。帶有多個選擇框條件的Ajax請求

我試圖實現與數據庫查詢的網頁,並遇到了一些dificulties:

如果有人能見識一下哪種方式進行,將不勝感激。

我不想你寫整個代碼但對我來說是給我一些提示和線索。

我有一個表,Id,項目,price1,price2和price3。

經過大量搜索後,我設法將所有項目dynamicaly加載到選擇列表中,並根據使用ajax調用選擇的項目在on事件中顯示(price1)on on change事件。

現在我需要更新基於其他兩個選擇列表這個價格格:一個用3個值(A,B,C),另一種用(是或否)。

如果選擇列表2是(a)和選擇列表3(是)要被顯示的價格(price2);如果選擇清單2是(b)並且選擇清單3是(是),則要顯示的價格是(price3),並且如果選擇清單3選項是(否),則必須將雙倍價格加載。所有與ajax和不管選擇的順序。

希望我說清楚了。 如果需要,我可以加載我的代碼。

在此先感謝。 瓦斯科

這是我到目前爲止有:

Ajax.php

<?php 
db connection variables 


if(!isset($_GET['id'])){ 
    echo json_encode(array('success' => false, 'price_1' => '', 'message' => 'no id given')); 
    exit; 
} 

try { 
    $conn = new PDO("mysql:host=$servername;dbname=test", $username, $password); 
    $conn->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION); 
} catch (PDOException $e) { 
    trigger_error("Connection failed: " . $e->getMessage()); 
    echo json_encode(array('success' => false, 'price_1' => '', 'message' => 'shit happened' . $e->getMessage())); 
    exit; 
} 

$stmt = $conn->prepare("SELECT price_1 FROM table WHERE id = ?"); 
$stmt->execute(array($_GET['id'])); 
$result = $stmt->fetch(PDO::FETCH_ASSOC); 

if($result === false){ 
    trigger_error('Query failed: ' . $conn->errorInfo()); 
    echo json_encode(array('success' => false, 'price_1' => '', 'message' => 'shit happened')); 
    exit; 
} else { 
    echo json_encode(array('success' => true, 'price_1' => $result['price_1'], 'message' => '')); 
    exit; 
} 

的index.php

<?php 
Connection Variables 
try { 
    $conn = new PDO("mysql:host=$servername;dbname=test;charset=UTF8", $username, $password); 
    $conn->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION); 
} catch (PDOException $e) { 
    trigger_error("Connection failed: " . $e->getMessage()); 
} 
$query = "SELECT `id`, `items`, `price_1` FROM `table`"; 
$rows = $conn->query($query)->fetchAll(PDO::FETCH_ASSOC); 
?> 
<!DOCTYPE html> 
<html> 
    <head> 

     <script> 
      function getPrice(id){ 
       var xmlhttp = new XMLHttpRequest(); 
       xmlhttp.onreadystatechange = function() { 
        if (xmlhttp.readyState === 4 && xmlhttp.status === 200) { 
         var jsonObj = JSON.parse(xmlhttp.responseText); 
         if(jsonObj.success === true){ 
          document.getElementById("price_1").value = jsonObj.price_1; 
         }else{ 
          document.getElementById("price_1").innerHTML = jsonObj.message; 
         } 
        } 
       }; 
       xmlhttp.open("GET", "ajax.php?id=" + id, true); 
       xmlhttp.send(); 
      } 
     </script> 
    </head> 
<body> 



<div> 

<h3>GET A QUOTE</h3> 



    Item: 
    <br> 
    <select name="price" id="priceSelect" onchange="getPrice(this.value)"> 
     <option>Please select:</option> 
    <?php foreach ($rows as $row): ?> 
     <option value="<?= $row['id'] ?>"><?= $row['items'] ?></option> 
    <?php endforeach; ?> 
    </select> 
    <br> 

    size: 
    <br> 
<select name="price" id="sizeselectSelect" onchange="sizePrice(this.value)"> 
     <option>Please select:</option> 
     <option value="1">size1</option> 
     <option value="2">size2</option> 
     <option value="3">size3</option> 
    </select> 

<br> 
     double: 
     <br> 
     <select name="bouble" id="doubleprice" onchange="lastprice(this.value)"> 
     <option>Please select:</option> 
     <option value="yes">Yes</option> 
     <option value="no">No</option> 
    </select> 
<br> 
<br> 
Total price: 

    <input type="text" name="price_1[]" value="" id="price_1">&euro; 
    <p id="error"></p> 


</body> 
</html> 
+0

如果你能提供什麼你迄今所做使用代碼片斷它會更容易明白你想實現,因爲它沒有任何意義,現在是什麼。 – kabirbaidhya

回答

0

我會使用jQuery靜坐簡化AJAX。

如果數據沒有那麼大,我會做頁面加載一個Ajax請求(爲防止萬噸的用戶等待時間,兒子Ajax調用),結果存儲到一個javascript全局/對象。

如果頁面根本不打算刷新,並且數據意味着「活」,那麼等待時間可能會縮短,但是當用戶選擇一個選項時,您只會觸發ajax調用。

您可以使用類似的結構,這樣的:

//bind event of select changing to a funciton that fires off the ajax 
//the below avoids having to attach/unattach evenmt handlers on any dynamic elements 
var body = jQuery("body"); 
body.on("change","#selectID",updatePriceFunction); 

function updatePriceFunction() { 
    loader.show();//unhide the loading animation 
    var optionChosen = jQuery("#selectID").find("option:selected").val();//this assumes the options have values that are identifies for that option to be sent to the ajaxEndpoint 
     var payload = {selectedOption: optionChosen, otherData: otherValueNeeded}; //makes a javascript object with values to be sent to fetch the price 
     jQuery.ajax({ 
      type: "POST", 
      url: urlToAjaxEndpoint,//string 
      data: payload, 
      dataType: "json", 
      traditional: true, 
      success: getDataSuccess, 
      error: ajaxErrorHandling, 
      complete: function() {loader.hide();}//always hide the loading animation, even if ajax fails 
     }); 

     //methods seperated (not inline in the above ajax call) as to allow for reuse 

     function getDataSuccess(data){//data is the response form the server, parsed using jQuery JSON if the ajaxEndpoint server said the response type was JSON 
     if(data.result == true) { 
      //find the table area you wnat to update, and use the new value 
      //data.result ..... 
     } else { 
      //server returned value indicating operation was successful, such as if the combo was invalid or not, etc 
      //data.message .... 
     } 
     } 

     function ajaxErrorHandling(jqXHR, textStatus, errorThrown){//jqXHR is the jquery xml html request object 
      //ajax error connecting to endpoint/exception on response parsing 
      var details = JSON.stringify(jqXHR, null, 4); 
      console.error("Exception: "+errorThrown+" - Status: "+textStatus + " - XMLHTTPRequest:" + details); 
      showAlertMessage("An error occurred"); 
     } 
} 

//this assumes the server returns a json object of the form: 
//[ 
// error: true/false, 
// message: "", 
// result: object 
//] 

//whatever the endpoint uses, you'll likely need to parse the payload object, and then create a json response 
//be careful of special characters on the endpoint, as they can be "escaped" in the raw json and will throw a parse exception 

這應該足以讓你開始正確的道路。 PS:jQuery不是必需的,但它使它更容易。