如何在不刷新页面的情况下提交REST请求

时间:2016-05-25 08:26:06

标签: javascript php jquery ajax rest

我有这个PHP代码:

if (isset($_POST['submit'])) {
    //Set variables
    date_default_timezone_set('Europe/Sofia');
    $hotelID = 1;
    $userName = 'admin';
    $password = 'admin';
    $url = 'serviceurl/goes/here';
    $requestTime = date('d.m.Y H:i:s');
    $tempFromDate = date_create($_POST['fromDate']);
    $tempToDate = date_create($_POST['toDate']);
    $fromDate = date_format($tempFromDate, 'd.m.Y H:i:s' );
    $toDate = date_format($tempToDate, 'd.m.Y H:i:s' );
    $token = md5('some_token');
    $data = array(
        'Content-Encoding: chunked',
        'Transfer-Encoding: chunked',
        'fromDate: ' . $fromDate,
        'toDate: ' . $toDate,
        'hotelID: ' . $hotelID,
        'requestTime: ' . $requestTime,
        'userName:' . $userName,
        'token: ' . $token,
    );

    //Start cURL and set options
    $ch = curl_init();
    curl_setopt($ch, CURLOPT_URL, $url);
    curl_setopt($ch, CURLOPT_POST, true);
    curl_setopt($ch, CURLOPT_HTTPHEADER, $data);
    curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
    curl_setopt($ch, CURLOPT_CONNECTTIMEOUT, 3);
    $response = curl_exec($ch);

    //If there are errors, save and display them
    if (!$response) {
        $error = curl_error($ch);
    } else {
        $result = json_decode($response,true);
        curl_close($ch);
        print_r($result);
    }
}

它向服务提交请求,该请求返回JSON响应。这是有效的,因为我得到了我需要的结果。问题是,我需要能够提交此请求,然后使用我获得的数据显示更多字段,而无需刷新页面。我的表格如下:

<form action="" method="post" class="form-inline" id="form">
    <div class="form-group">
        <label for="fromDate">From Date</label>
        <input type="date" name="fromDate" id="fromDate" required>
    </div>
    <div class="form-group">
        <label for="toDate">To Date</label>
        <input type="date" name="toDate" id="toDate" required>
    </div>
    <?php
    if(isset($_POST['submit']) && $result['Status'] === 'OK') {
    ?>
    <div class="form-group">
        <label for="rooms">Choose Room</label>
        <select name="rooms" id="rooms">
            <option value='<?php echo $result['Content'][0]['TypeName']; ?>'><?php echo $result['Content'][0]['TypeName']; ?></option>
            <option value='<?php echo $result['Content'][1]['TypeName']; ?>'><?php echo $result['Content'][1]['TypeName']; ?></option>
            <option value='<?php echo $result['Content'][2]['TypeName']; ?>'><?php echo $result['Content'][2]['TypeName']; ?></option>
            <option value='<?php echo $result['Content'][3]['TypeName']; ?>'><?php echo $result['Content'][3]['TypeName']; ?></option>
            <option value='<?php echo $result['Content'][4]['TypeName']; ?>'><?php echo $result['Content'][4]['TypeName']; ?></option>
        </select>
    </div>
    <div class="form-group">
        <label for="people">Adults</label>
        <select name="people" id="people">
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
            <option value="4">4</option>
        </select>
    </div>
        <div class="form-group">
            <label for="email">Email</label>
            <input type="email" name="email" id="email">
        </div>
        <div class="form-group">
            <label for="names">Names</label>
            <input type="text" id="names">
        </div>
        <div class="form-group">
            <label for="telephone">Phone</label>
            <input type="text" id="telephone">
        </div>
        <div class="form-group">
            <label for="notes">Notes</label>
            <textarea name="notes" id="notes" cols="30" rows="10"></textarea>
        </div>
    <?php } ?>
    <button type="submit" id="submit" name="submit">Check availability</button>
</form>

我知道jquery / ajax应该发挥作用,但到目前为止,我尝试的一切都不起作用。对服务的请求未提交。非常欢迎任何帮助。

1 个答案:

答案 0 :(得分:0)

嗯...

我认为您可以使用jQuery将AJAX发送到服务器,并使用JS编辑您的网站(只需在控制台中打印也可以)

jQuery Post:https://api.jquery.com/jquery.post/

你需要了解一些Ajax知识。