javascript - 让 PHP、Form 和 Javascript 协同工作

Question

我正在为客户创建一个网页，我希望 HTML 能够与 PHP 和 Javascript 一起使用，但我无法理解两者如何工作。

 <label for="pizza1-2">Small: </label>
        <input type="radio" name="size1" id="pizza1" value="Size: Small" onclick="sourcesize(this.value)"/><br />
    <label for="pizza1-3">Medium: </label>
        <input type="radio" name="size1" id="pizza1" value="Size: Medium" onclick="sourcesize(this.value)"/><br />
    <label for="pizza1-4">Large: </label>
        <input type="radio" name="size1" id="pizza1" value="Size: Large" onclick="sourcesize(this.value)"/><br /><br />
    <label for="pizza11">Two Types of Pizza in One Click Here: </label>
        <input type="checkbox" name="half1" id="pizza11" value="One Half: "/><br />
</td>

<!--Size1 End-->


<!--Type1-->
<td>        
    <label for="pizzaoption1">Select Your 1st Pizza</label>
        <select name="pizzaoption1" id="pizzaoption1" onchange="sourcetype(this.value)">
            <option value="none" >None</option>
            <option value="dheese" title="cheese">Cheese</option>
            <option value="pepperoni" title="pepperoni">Pepperoni</option>
            <option value="hawaiian" title="ham and pineapple">Hawaiian</option>
            <option value="canadian" title="Ham, Bacon, Tomatoes, Onions, and Cheddar Cheese.">Canadian</option>
            <option value="freshgarden" title="Mushrooms, Green Peppers, Onions, Olives, Tomatoes, Pineapple, and a sprinkle of Basil">Fresh Garden Vegetarian</option>
            <option value="classic" title="Pepperoni, Mushrooms, and Green Pepper">Baldy's Classic</option>
            <option value="donair" title="Donair Meat, Onions, and Tomatoes on Donair Sweet Sauce">Donair Pizza</option>
            <option value="bbqchicken" title="Chicken, Bacon, Pineapple, Mushrooms, Onions and Cheddar Cheese on a BBQ sauce">BBQ Chicken</option>
            <option value="housepecial" title="Pepperoni, Ham, Lean Beef, Mushrooms, Green Peppers, Onions, Olives, and Tomatoes">House Special</option>
            <option value="buffalochicken" title="Chicken, Onions, Mushrooms, Bacon, Mexican Spices and Cheddar Cheese on a Hot Sauce base">Buffalo Chicken</option>
            <option value="tropicchicken" title="Chicken, Pineapple, Bacon and Cheddar Cheese on a Tangy Tropical base.">Tropical Chicken</option>
            <option value="tropichawaiian" title="Ham, Pineapple, Bacon and Cheddar Cheese on a Tangy Tropical Sauce base.">Tropical Hawaiian</option>
            <option value="meatlovers" title="Pepperoni, Ham, Italian Sausage, Salami, Lean Beef and Bacon">Meat Lovers</option>
            <option value="perogy" title="Bacon, Potatoes, Onions, Cheddar Cheese, on a Sour Cream base">Perogy</option>
            <option value="mediterranean" title="Lean Beef, Tomatoes, Onions, Green Peppers, Olives, and Greek Feta">Mediterranean Special</option>
            </select>


<input type="button" name="submit" value="Add A Pizza!" onclick="addPizza()" /><div id="orderfinal">
<a name="anchor"><p>You're Order Includes:</p></a>

这是我的 Javascript

var sizeprice;
var typeone;

function sourcetype(t) {
if (t == 'cheese') {
    typeone = "Cheese"
}
else if (t == 'pepperoni') {
    typeone = "Pepperoni"
}
else if (t == 'hawaiian') { 
    typeone = "Hawaiian"
}
else if (t == 'canadian') {
    typeone = "Canadian"
}
else if (t == 'freshgarden') {
    typeone = "Fresh_Garden"
}
else if (t == 'classic') {
    typeone = "Classic"
}
else if (t == 'donair') {
    typeone = "Donair"
}
else if (t == 'bbqchicken') {
    typeone = "BBQ_Chicken"
}
else if (t == 'housespecial') {
    typeone = "House_Special"
}
else if (t == 'buffalochicken') {
    typeone = "Buffalo_Chicken"
}
else if (t == 'tropicchicken') {
    typeone = "Tropical_Chicken"
}
else if (t == 'tropichawaiian') {
    typeone = "Tropical_Hawaiian"
}
else if (t == 'meatlovers') {
    typeone = "Meat_Lovers"
}
else if(t == 'mediterranean') {
    typeone = "Mediterranean"
}
else if (t == 'perogy') {
    typeone = "Perogy"
}
};
function sourcesize(s) {
if (s == 'Size: Small') {
    sizeprice = "Small"
}
else if (s == 'Size: Medium') {
    sizeprice = "Medium"
}
else if (s == 'Size: Large') {
    sizeprice = "Large"
}
};



function displaycost(sizeprice,typeone) {
var pizzaPrice;


if (sizeprice == 'Small' && typeone =='none') {
    alert("Enter Valid Type!")
}
else if (sizeprice == 'Small' && typeone == 'Cheese') {
    pizzaPrice = "$9.75"
}
else if (sizeprice == 'Medium' && typeone == 'Cheese') {
    pizzaPrice = "$11.75"
}
else if (sizeprice == 'Large' && typeone == "Cheese") {
    pizzaPrice = "$14.50"
    }
else if (sizeprice == "Small" && typeone == "Pepperoni") {
    pizzaPrice = "$10.50"
    }
else if (sizeprice == "Medium" && typeone == "Pepperoni") {
    pizzaPrice = "$12.75"
    }
else if (sizeprice == "Large" && typeone == "Pepperoni") {
    pizzaPrice = "$15.50"
    }
else if (sizeprice == "Small" && typeone == "Hawaiian") {
    pizzaPrice = "$10.75"
    }
else if (sizeprice == "Medium" && typeone == "Hawaiian") {
    pizzaPrice = "$13.50"
    }
else if (sizeprice == "Large" && typeone == "Hawaiian") {
    pizzaPrice = "$16.50"
    }
else if (typeone == "Canadian" && sizeprice == "Small"  || typeone == "Fresh_Garden" && sizeprice == "Small" || typeone == "Classic"  && sizeprice == "Small" || typeone == "Donair" && sizeprice == "Small" ) {
    pizzaPrice = "$12.00"
    }
else if (typeone == "Canadian" && sizeprice == "Medium" || typeone == "Fresh_Garden" && sizeprice == "Medium" || typeone == "Classic" && sizeprice == "Medium" || typeone == "Donair" && sizeprice == "Medium") {
    pizzaPrice = "$15.00"
    }
else if (typeone == "Canadian" && sizeprice == "Large" || typeone == "Fresh_Garden" && sizeprice == "Large" || typeone == "Classic" && sizeprice == "Large" || typeone == "Donair" && sizeprice == "Large") {
    pizzaPrice = "$18.00"
    }

else if (typeone == "BBQ_Chicken" && sizeprice == "Small" || typeone == "House_Special" && sizeprice == "Small" || typeone == "Buffalo_Chicken" && sizeprice == "Small" || typeone == "Tropical_Chicken" && sizeprice == "Small") {
    pizzaPrice = "$14.00"
    }
else if (typeone == "BBQ_Chicken" && sizeprice == "Medium" || typeone == "House_Special" && sizeprice == "Medium" || typeone == "Buffalo_Chicken" && sizeprice == "Medium" || typeone == "Tropical_Chicken" && sizeprice == "Medium") {
    pizzaPrice = "$17.00"
    }
else if (typeone == "BBQ_Chicken" && sizeprice == "Large" || typeone == "House_Special" && sizeprice == "Large" || typeone == "Buffalo_Chicken" && sizeprice == "Large" || typeone == "Tropical_Chicken" && sizeprice == "Large") {
    pizzaPrice = "$20.00"
    }
else if (typeone == "Tropical_Hawaiian" && sizeprice == "Small" || typeone == "Meat_Lovers" && sizeprice == "Small" || typeone == "Perogy" && sizeprice == "Small" || typeone == "Mediterranean" && sizeprice == "Small") {
    pizzaPrice = "$13.00"
    }
else if (typeone == "Tropical_Hawaiian" && sizeprice == "Medium" || typeone == "Meat_Lovers" && sizeprice == "Medium" || typeone == "Perogy" && sizeprice == "Medium" || typeone == "Mediterranean" && sizeprice == "Medium") {
    pizzaPrice = "$16.00"
    }
else if (typeone == "Tropical_Hawaiian" && sizeprice == "Large" || typeone == "Meat_Lovers" && sizeprice == "Large" || typeone == "Perogy" && sizeprice == "Large" || typeone == "Mediterranean" && sizeprice == "Large") {
    pizzaPrice = "$19.00"
} 
return pizzaPrice;
}


function addPizza(){

var orderInput = document.createElement("P");
var order = document.createTextNode("Pizza is a " + sizeprice + " " + typeone + " for:  " + displaycost(sizeprice,typeone));
orderInput.appendChild(order);
document.getElementById("orderfinal").appendChild(orderInput);
}

最后是 PHP

<?php
$emailSubject = 'Pizza Order!';
$webMaster = 'veritasdelux@gmail.com';
$orderBody = $_POST['orderfinal'];
$halfHalf1 = $_POST['half1'];
$pizzaoption1 = $_POST['pizzaoption1'];
$body = <<<EOD
<br><hr><br>
$orderBody <br>
$halfHalf1 <br>
EOD;
$headers = "Pizza: $pizzaoption1Field\r\n";
$headers .= "Content-type: text/html\r\n";
$success = mail($webMaster, $emailSubject, $body, $headers);
?>

说实话，我正在挣扎。我对 Javascript 和 PHP 有丰富的经验。我无法理解的是如何让输入字段同时进入 PHP 文件和 Javascript 文件。我需要 PHP，这样我就可以通过电子邮件发送该字段，但输入字段会转到旨在显示价格的 Javascript 代码。客户希望发送披萨订单，并且希望客户能够看到价格的实时统计。这就是我在 Javascript 中所做的事情，每次您点击“添加披萨”按钮时，您都会得到订单和价格的运行记录，但是您是否会获取已在 Javascript 中使用的该信息，并将其转换为一封电子邮件...

Answer 1

好的，有几件事:1)你可以做任何你想做的事情，而不需要使用Javascript。一个简单的帖子表单就可以了:

<form action='process.php'>
       <input...
       <input...
       <input type=submit value='submit'>
   </form>

2) 但是，如果您想采用 AJAX 风格(其中，不是整个页面更改，而是部分更改)，您需要收集表单信息并在后台提交，然后返回并将信息放入结果中。这比后表单复杂得多。

如果您想要选项 2(听起来像)，请使用 JQuery 并向您的页面添加如下内容:

$(document).ready(function(){
  $('form').submit(function(e){
     e.preventDefault();
     var serialized = serialize($(this));
     console.log(serialized);

     $.post( "process_file.php", {data: JSON.stringify(serialized)})
     .done(function( data ) {
         $('#inject').html(data)
      });
  });
});

序列化函数是我编写的函数，它采用多种形式并将它们分解为一个对象。

解释:1) document.ready 部分在页面准备好时调用脚本(所有 DOM 元素、表单等都在那里)。2)当单击“提交”按钮时，form.submit部分调用该函数。3) PreventDefault 阻止表单尝试以通常的方式提交。4) .post 部分调用 PHP 页面并返回结果(称为“数据”)。它在发送之前将“序列化”对象转换为 JSON 字符串5) 然后将“数据”注入(inject)到您的页面中。如果你想制作一个列表，你可以使用.append而不是.html。

看到这个 fiddle :https://jsfiddle.net/ey5m18vv/3/

请记住，这本身是行不通的!您需要在 PHP 文件 ($_POST) 中接收 POST 并解码 JSON。像这样的事情:

$info = json_decode($_POST);