在ajax handleResponse中没有得到php的响应

时间:2016-03-28 21:08:31

标签: javascript php ajax forms

我正在尝试对数据库执行搜索。我的目标是使用搜索表单并使用ajax来请求PHP返回结果。问题是,我没有在ajax handleRequest函数中得到响应。另外,我如何从php发送回xml响应。这是我的代码。抱歉杂乱无章。

的index.php

    <!doctype>
    <html lang="en">
    <head>
    <title>Test Form</title>
    <script src="js/validate.js"></script>
</head>
<body onload="setfocus();">
    <span id="error"></span>
    <form id ="searchForm" method="POST" action="/php/validate.php"
    onsubmit="event.preventDefault(); process();">
        <input type="text" placeholder="Eg. Canada" name="country" id="country_id" 
        onblur="validate(this.id, this.value);" required/>
        <br />
        <input type="text" placeholder="Eg. Toronto" name="city" id="city_id" 
        onblur="validate(this.id, this.value);" required/>
        <br />
        <label for="featues">Features</label>&nbsp;&nbsp;
        WiFi<input type="checkbox" name="wifi" value="wifi" />&nbsp;&nbsp;
        TV<input type="checkbox" name="tv" value="tv" />&nbsp;&nbsp;
        Breakfast<input type="checkbox" name="breakfast" value="breakfast" />&nbsp;&nbsp;
        <br />
        <label>Room Type</label>
        <select name="roomtype">
            <option name="mastersuite" value="mastersuite">Master Suite</option>
            <option name="suite" value="suite">Suite</option>
            <option name="largeroom" value="largeroom">Large Room</option>
            <option name="smallroom" name="smallroom">Small Room</option>
        </select>
        <br />
        <label>Price Range</label>
        <input type="text" name="minrange" id="price_min_range_id" 
        onblur="validate(this.id, this.value);" />
        <input type="text" name="maxrange" id="price_max_range_id" 
        onblur="validate(this.id, this.value);" />
        <br />
        <label>Stay date</label>
        <br />
        <label>Arrival Date</label>&nbsp;&nbsp;
        <input type="date" name="arrival" id="arrival" placeholder="MM/DD/YYYY"
        onblur="validate(this.id, this.value);" required/>&nbsp;&nbsp;
        <label>departure Date</label>&nbsp;&nbsp;
        <input type="date" name="departure" id="departure" placeholder="MM/DD/YYYY"
        onblur="validate(this.id, this.value);" />
        <br />
        <input type="submit" name="search" value="search">
    </form>
    <div id="responseDiv"></div>

</body>
</html>

validate.js

    var xmlHttp;
//var serverAddr;
//var error;
var response;

function createHttpRequestObject(){
    var responseObj;
    //for IE
    if(window.ActiveX){
        var vers = new Array("MSXML2.XML.Http.6.0",
                             "MSXML2.XML.Http.5.0",
                             "MSXML2.XML.Http.4.0",
                             "MSXML2.XML.Http.3.0",
                             "MSXML2.XML.Http.2.0",
                             "Microsoft.XMLHttp");
        for(var i=0; i<vers.length && !responseObj; i++){
            try{
                responseObj = new ActiveXObject(vers[i]);
            }catch(e){
                responseObj = false;
            }
        }
    }
    else{ //for all other browser
        try{
            responseObj = new XMLHttpRequest();
        }catch(e){
            responseObj = false;
        }
    }
    if(!responseObj || responseObj === false){
        alert("Failed to create response object");
    }
    else{
        return responseObj;
    }
}
function process(){

    xmlHttp = createHttpRequestObject();
    if(xmlHttp){

        var firstname = encodeURIComponent(
            document.getElementById("firstname").value);
        var roomtype = encodeURIComponent(
            document.getElementById("roomtype").options[
            document.getElementById("roomtype").selectedIndex].value);
        var minrange = encodeURIComponent(
            document.getElementById("price_min_range_id").firstChild.value);
        var maxrange = encodeURIComponent(
            document.getElementById("price_max_range_id").firstChild.value);
        var city = encodeURIComponent(document.getElementById("city_id").firstChild.value);
        var country = encodeURIComponent(
            document.getElementById("country_id").firsChild.value);
        var arrivalDate = encodeURIComponent(
            document.getElementById("arrivalDate").value);
        var departureDate = encodeURIComponent(
            document.getElementById("departureDate").value);
        var amenity_breakfast = encodeURIComponent(
            document.getElementByName("Breakfast").checked);
        var amenity_tv = encodeURIComponent(
            document.getElementByName("TV").checked);
        var amenity_wifi = encodeURIComponent(
            document.getElementByName("wifi").checked);
            //get other filed values

            xmlHttp.open("POST", "php/validate.php", true);
            xmlHttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
            xmlHttp.onreadystatechange = handleResponse;
            xmlHttp.send("firstname=" + firstname + "&roomtype="+ roomtype + "&country="+ country + "&city=" + city + "&minrange=" + minrange + "&maxrange=" + maxrange + "&arrivalDate="+arrivalDate + "&departureDate="+ departureDate + "&breakfast="+
            amenity_breakfast + "&tv="+amenity_tv + "&wifi="+ amenity_wifi);


    }

    else{
            alert("Error connecting to server");
    }
}
function handleResponse(){
  var docdiv = document.getElementById("responsediv");
  var table = "";
    if(xmlHttp.readyState==4){
        if(xmlHttp.status==200){
            //the search info as xml
            //var response = xmlHttp.responseXML;
            response = xmlHttp.responseXml;
            if(!response || response.documentElement){//catching errors with IE, Opera
                alert('Invalide Xml Structure:\n'+ response.responseText);
            }
            var rootNodeName = response.documentElement.nodeName;
            if(rootNodeName=="parseerror"){//catching error with firefox
                alert('Invalid Xml Structure:\n');
            }
            var docroot = response.documentElement;
            var responseroot = docroot.getElementByTagName("response");

            //extracting all hotel values from search
            var hotels = new Array(responseroot.getElementByTagName("hotels"));
            table = "<table border='1px solid' margin='2px' padding='5px'>";
            //docdiv.appendChild(table);
            for(var i=0; i<hotels.legnth; i++){
                var hotelroot = hotels[i].getElementTagName("name");
                var hotelname = hotelroot.firstChild.data;
                var hoteladd = hotels[i].getElementByTagName("hoteladd").firstChild.data;
                var reqRoomNum = hotels[i].getElementTagName("reqroom").firsChild.data;



                table +="<tr>";
                //row = table.append(row);
                //name column
                table += "<td>";
                table += hotelname + "</td>";

                //address column

                table += "<td>";
                table += hoteladd + "</td>";


                //desired roomttype 
                table += "<td>";
                table += reqRoomNum + "</td>";
                //docdiv.createElement("</tr>");
                table += "</tr>";
            }
            table += "</table>";    
        }
        docdiv.innerHTML= table;

    }
}
function validate(fieldId, value){
    //var error = 0;
    //var errortext = '';
    switch(fieldId){
        /*case 'name':
            var chk_name_regex = /^[A-Za-z ]{3,30}$/;
            if(value.length<4 &&!chk_name_regex.test(value)){
                print_error('Name format wrong',fiedlId);
            }
            break;*/
        case 'country_id':
            var chk_country_regex = /^[A-Za-z- ]{4,50}$/;
            if(value.length<4 && !chk_country_regex.test(value)){
                print_error('Country name format wrong',fieldId);
            }
            break;
        case 'city_id':
            var chk_city_regex = /^[A-Za-z- ]{4,50}$/;
            if(value.length<4 && !chk_city_regex.test(value)){
                print_error('City name format wrong',fieldId);
            }
            break;

        case 'price_min_range_id':
            var r = value; 
            if(r<0){
                print_error('Min range must be zero atleast',fieldId);
            }
            break;
        case 'price_max_range_id':
            r = value;
            if(!(r>=0 && r>=document.getElementById('price_min_range_id').firstChild.value)){
                print_error('Max index must be atleast zero or greater than min',fieldId);
            }
            break;
        case 'arrival':
           var arrival = value;
           var datecomp = arrival.explode("/");
           var monthOk = parseInt(datecomp[0])>=1 && parseInt(datecomp[0])<=12;
           var getleapday = parseInt(datecomp[2]) % 4===0 && 
           parseInt(datecomp[2])%100===0 && parseInt(datecomp[2])%400===0;
           var dayOk = parseInt(datecomp[1])>=1 && parseInt(datecomp[2])<=31;
           var yearOk = parseInt(datecomp[2])>2015;
           if(monthOk && dayOk && yearOk){
               print_error('Date format is wrong',fieldId);
           }
           break;
    }
}
function print_error(msg, fieldId){
    var errorSpan = document.getElementById('error');
    errorSpan.innerHTML = "<p text-color='red'>" + msg + "</p>";
    document.getElementById(fieldId).focus();
}
function setfocus(){
    document.getElementById('country_id').focus();
}

validate.php

<?php
    function just_check(){
        print_r($_POST);
    }
    just_check();
    //config script
    require_once('config.php');
    //vars for all the fileds
    $country = $city = $wifi = $tv = $breakfast = $minrange = $maxrange
    = $arrival = $departure = $roomtype = '';
    //server side input validation
    if($_SERVER['REQUEST_METHOD']=='POST'){
        $country = inputValidation($_POST['country']);
        $city = inputValidation($_POST['city']);
        $minrange = inputValidation($_POST['minrange']);
        $maxrange = inputValidation($_POST['maxrange']);
        $arrival = inputValidation($_POST['arrivalDate']);
        $departure = inputValidation($_POST['departureDate']);
        $roomtype = $_POST['roomtype'];
        if(isset($_POST['wifi'])){
            $wifi = true;
        }
        if(isset($_POST['tv'])){
            $tv = true;
        }
        if(isset($_POST['breakfast'])){
            $breakfast = true;
        }
    }
    //echo $country . " " . $city . '<br >';
    //connect to mysql
    $db = new mysqli(DB_HOST, DB_USER, DB_PASS, DB_NAME)
        or die('Could not connect to db');

    //query the database matching fields;
    $query = "SELECT hotel_id, hotel_name FROM allhotels WHERE ";
    //echo $query . '<br />';
    if(isset($country)){
        $query .= "(hotel_country='$country') AND"; 
    }
    //echo $query . '<br />';
    if(isset($city)){
        $query .= " (hotel_city='$city') AND";
    }

    $query =  substr($query,0, -4);
    // echo $query . '<br />';
    $res = $db->query($query);
    //echo $query . '<br />';
    if(!$res){
        echo $db->errno . '->' . $db->error;
    }

    //setting header to XML
    header('ContentType: text/xml');
    //creating XML response string"
    $dom = new DOMDocument();
    $response = $dom->createElement("response");
    $dom->appendChild($response);
    while($row = $res->fetch_array(MYSQLI_ASSOC)){
        //matching room field value for query
        $roomfield='';
        if($roomtype == 'mastersuite'){
            $roomfield = 'hotel_master_suites';
        }
        else if($roomtype == 'suite'){
            $roomfield = 'hotel_suite';
        }
        else if($roomtype == 'largeroom'){
            $roomfield = 'hotel_large_rooms';
        }
        else{
            $roomfield = 'hotel_small_rooms';
        }
        //query with the roomfield and hotel_id value
        $htl_id = $row['hotel_id'];
        $subquery = "SELECT hotel_add, $roomfield FROM spechotel WHERE ".
            "(hotel_id = $htl_id) AND ($roomfield > 0) AND";
        if(isset($wifi)){
        $subquery .= " (wifi=1) AND";
        }
        //echo $subquery . '<br />';
        if(isset($tv)){
            $query .= " (tv=1) AND";
        }
        //echo $query . '<br />';
        if(isset($breakfast)){
            $query .= " (breakfast=1) AND";
        }
        //echo $query . '<br />';
        $subquery = substr($subquery,0, -4);
        // echo $query . '<br />';

        //echo $subquery . '<br />';    
        $subrow = $db->query($subquery);
        $subrow = $subrow->fetch_array(MYSQLI_ASSOC);
        $hotel_header = $dom->createElement("hotels");
        $hotel_name = $dom->createElement("name");
        $hotel_name->appendChild($dom->createTextNode($row['hotel_name']));


        $hotel_add = $dom->createElement("hoteladd");
        $hotel_add->appendChild($dom->createTextNode($subrow['hotel_add']));

        //$hotel_postal = $hotel_header->apppendChild("hotelpostal");
        //$hotel_postal->createTextNode($subrow['']);

        $hotel_req_room = $dom->createElement("reqroom");
        $hotel_req_room->appendChild($dom->createTextNode($subrow[$roomfield]));

        $hotel_header->appendChild($hotel_name);
        $hotel_header->appendChild($hotel_add);
        $hotel_header->appendChild($hotel_req_room);
    }
    $xmlString = $dom->saveXML();
    //print table

    $db->close();
    //close connection
    //return search 
    function print_search_result(){
        global $xmlString;
        echo $xmlString;
    }
    print_search_result();



    function inputValidation($data){
        $data = trim($data);
        $data = stripslashes($data);
        $data = htmlspecialchars($data);
        return $data;
    }

?>

0 个答案:

没有答案