从PHP返回字符串到Ajax

时间:2017-04-30 23:53:05

标签: php ajax

我有一个Ajax脚本,可以在用户提交时将表单信息转发给PHP。将数据插入表中,然后将字符串返回给Ajax。出于某种原因,我没有获取字符串,而是获取页面的完整HTML代码。如何获取字符串而不是HTML代码?

HTML

  <form id='orderForm' action='' method='post'>

                        <h2>Choose your pizza size</h2><hr>
                            <select name='size'>
                            <option value='' disabled selected>Choose a size</option>
                            <option value='small'>Small</option>
                            <option value='medium'>Medium</option>
                            <option value='large'>Large</option></select>

                            <h2>Choose your toppings</h2><hr><label><input type='checkbox' name='check_list[]' value='beef'>Beef</label>
                            <label><input type='checkbox' name='check_list[]' value='pepperoni'>Pepperoni</label>
                            <label><input type='checkbox' name='check_list[]' value='chicken'>Chicken</label>
                            <label><input type='checkbox' name='check_list[]' value='sausage'>Sausage</label>


                 <h2>Enter your details</h2><hr><input type='text' name='name' placeholder='Full Name'>
                        <input type='email' name='email' placeholder='Email'>
                        <input type='text' name='phone' placeholder='Phone number'>


                    <input type='text' name='address' placeholder='Address'>
                        <input id='zip' type='text' name='zip' placeholder='Zip Code'>
                        <p id='message'></p>



                      <input id='submitBtn' type='submit' name='submitBtn' value='Place Order'>
                        </form>

AJAX

$.ajax({
             type: 'post',
             url: 'validation.php',
             data: $("#orderForm").serialize(),
             datatype: "html",
             success: function(data){
                  window.location = data;
             }
       })

PHP

if (isset($_POST["email"])){

$orderId = time() + mt_rand(1,10);

$toppings = implode(', ', $_POST['check_list']);
$result = $db->prepare("INSERT INTO orders (order_id, type, pizza_type, size, toppings, name, address, email, number) VALUES (?, ?,?,?,?,?,?,?,?)");

$result->bind_param("sssssssss", $orderId, $_GET['type'], $_GET['order'], $_POST['size'], $toppings, $_POST['name'], $_POST['address'], $_POST['email'], $_POST['phone']);

$result->execute();
$db->close();

echo "?success=true&orderid=' . $orderId . '&toppings=' . $toppings";
}

2 个答案:

答案 0 :(得分:1)

您好我不知道如何获得$_GET['type']$_GET['order']

if (isset($_POST["email"])){

    $orderId = time() + mt_rand(1,10);

    $toppings = trim(implode(',', $_POST['check_list']));
    $type = $_POST['type'];
    $order = $_POST['order'];
    $result = $db->prepare("INSERT INTO orders (order_id, type, pizza_type, size, toppings, name, address, email, number) VALUES (?, ?,?,?,?,?,?,?,?)");

    $result->bind_param("issssssss", $orderId, $type, $order, $_POST['size'], $toppings, $_POST['name'], $_POST['address'], $_POST['email'], $_POST['phone']);
    try {
        $result->execute();
    }catch (Exception $e) {
        echo $e->getMessage();
    }
    $db->close();
    echo "?success=true&orderid=" . $orderId . "&toppings=" . $toppings;
}

表单页

<head>
    <link href='index.css?<?php echo time(); ?>' rel='stylesheet' type='text/css'>
    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
</head>
<body>
<div class='container'>
    <div class='startContainer'>
        <?php
        if (!isset($_GET['type'])) {
            if (!isset($_GET['success'])) {
                echo "<img src='order_bg'>
                        <a href='?type=delivery'><div class='orderOptions'>
                            <i class='material-icons'>directions_car</i>                            
                            Delivery
                        </div></a>

                        <a href='?type=carryout'><div class='orderOptions'>
                            <i class='material-icons''>store</i>
                            Carry out
                        </div></a>
                    </div>";
            } else {
                echo "<h1>Success!</h1><p>Your order id is: " . $_GET['orderid'] . "</p><br>
                    <p>Toppings: " . $_GET['toppings'] . "</p>
                    <h1>Your pizza will be ready in:</h1>
                    <h2 id='counter' style='text-align: center'></h2>";
            }
        } else {
            if (!isset($_GET['order'])) {
                echo "<img src='make_pizza'> &nbsp<h2>Choose your pizza.</h1>
                    <a href='?type=$_GET[type]&order=custom'><div class='pizzaType'>
                        <img src='custom_pizza'>
                        <i class='material-icons'>apps</i>
                        Custom made
                    </div></a>
                    <a href='?type=$_GET[type]&order=grandma'><div class='pizzaType'>
                        <img src='grandma_pizza'>
                        <i class='material-icons'>local_pizza</i>
                        Grandma's Pizza
                    </div></a>";
            } else {
                echo "<img src='order_pizza'>

                    <form id='orderForm' action='' method='post'>";

                if ($_GET['order'] == 'custom') {
                    echo "<h2>Choose your pizza size</h2><hr>
                            <select name='size'>
                            <option value='' disabled selected>Choose a size</option>
                            <option value='small'>Small</option>
                            <option value='medium'>Medium</option>
                            <option value='large'>Large</option></select>

                            <h2>Choose your toppings</h2><hr><label><input type='checkbox' name='check_list[]' value='beef'>Beef</label>
                            <label><input type='checkbox' name='check_list[]' value='pepperoni'>Pepperoni</label>
                            <label><input type='checkbox' name='check_list[]' value='chicken'>Chicken</label>
                            <label><input type='checkbox' name='check_list[]' value='sausage'>Sausage</label>";
                }

                echo "<h2>Enter your details</h2><hr><input type='text' name='name' placeholder='Full Name'>
                        <input type='email' name='email' placeholder='Email'>
                        <input type='text' name='phone' placeholder='Phone number'>
                        <input name='type' hidden value='" . $_GET['type'] . "' type='text'> 
<input type='text' name='order' hidden value='" . $_GET['order'] . "'>";

                if ($_GET['type'] == 'delivery') {
                    echo "<input type='text' name='address' placeholder='Address'>
                        <input id='zip' type='text' name='zip' placeholder='Zip Code'>
                        <p id='message'></p>";
                }


                echo "<input id='submitBtn' type='submit' name='submitBtn' value='Place Order'>
                        </form>";
            }
        }
        ?>
    </div>
</div>
<script>
    var count = 60,
        timer = setInterval(function () {
            $("#counter").html(count-- + " seconds");
            if (count == 0) {
                $("#counter").html("Order complete!");
                clearInterval(timer);
            }
        }, 1000);

    var zipCodes = ["30060", "30069", "30090", "30065", "30063", "30061", "30006", "30007", "30008", "30081", "30067", "30064", "30082", '30080', "30339", "30068", "30062", "30066", "30152", "30126", "30160", "30156", "30327", "30144", "30106", "30328", "30111", "30127", "30342"];

    $("#zip").on("focus", function () {
        $("#submitBtn").prop("disabled", false);
        $("#submitBtn").removeAttr("style");
        $("#message").text("");
    })

    $('#orderForm').submit(function (e) {
        e.preventDefault();
        e.stopImmediatePropagation();

        var zip = $("#zip").val();
        if (zipCodes.indexOf(zip) == -1) {
            $("#submitBtn").prop("disabled", true);
            $("#submitBtn").css("background-color", "gray");
            $("#message").text("We're sorry, but we do not deliver to the following zip code.");
        }
        else {
            $.ajax({
                type: 'post',
                url: 'file.php', // change this to php file.
                dataType: "text",
                data: $("#orderForm").serialize(),
                success: function (data) {
                   window.location = data;
                }
            })
        }
    })

</script>
</body>

答案 1 :(得分:0)

在js中,我建议您使用:

ajax.done()
ajax.fail()
ajax.always()

请注意使用:

'method'
'dataType'

所以,在Js中就像是:

var ajax = $.ajax({
            method: 'POST',
            dataType: 'json',
            url: 'validation.php',
            data: $("#orderForm").serialize()
        });

        ajax.done(function (data, textStatus, jqXHR) {
            window.location = data;
        });

在PHP中:

echo json_encode('your string');

编辑:

我无法发表评论,因为我是新人,所以我会附上我的新想法。 我刚刚再次进行了深入测试。

测试1:

我在js中分配了dataType: 'json'data: $("#testForm").serialize()。我呈交了。在PHP中我检查了收到的值。一切都好!我用json_encode($uri)回复了一个uri字符串。我在js中收到了uri字符串并应用了window.location = result。我成功地被重定向了!

测试2

我在js中分配了dataType: 'html'。我呈交了。在PHP中我检查了收到的值。一切都好!我用echo $uri回复了一个uri字符串。我在js中收到了uri字符串并应用了window.location = result。我成功地被重定向了!

提案:

所以,一切都在这里工作。但是,user2896120,我怀疑的东西。所以:

  • 你的bind_param有“sssssssss”作为第一个参数。但至少$ orderId是整数。改为

    之类的东西

    $ result-&gt; bind_param(“dsss ...”,$ orderId,/ ... /);

  • 在回显结果字符串之前关闭连接。

  • 在回显结果字符串之前不要打印任何内容。没有echo,print_r,var_dump等

  • 如果您收到html代码, READ IT !是真的你的网页HTML代码?或者来自“早期”打印的其他一些html代码(例如在回显你的结果字符串之前)?

新想法:

如果您收到了网页的html代码,请检查您是否在返回的html网页代码的末尾找到了结果字符串“?success = true&amp; orderid = ...”。

另一个想法:

<强> OB的。 apropos'decidden':

<input type="text" name="order" hidden value="<?php echo $_GET['order']; ?>>

应该像这样定义

<input type="hidden" name="order" value="<?php echo $_GET['order']; ?>>

<强> OB的。 apropos'type':

请勿在'name'属性中使用'type'作为值。也许它被视为保留名称!客户端和数据库部分都有。而且您的数据似乎完全插入“类​​型”值。

所以,我的意思是改变'类型'hier(可能会改为'mytype'进行测试):

<input name="type" hidden value="<?php echo $_GET['type']; ?>"