好的，我正在努力思考如何向购物车中添加内容并在不重新加载页面的情况下将其显示在页面中。
所以我试着写一些非常简单的东西，这样我就可以全神贯注地思考逻辑是如何工作的以及如何正确编写的。在我的示例中，我在 session['cart'] 的页面中有一个 div 和一个下拉菜单。
一个选项的值为“red”，另一个选项的值为“blue”。当我选择值为“red”的选项时，我希望“red”显示在 session['cart'] 中正文标记之后的 div 中。当我选择值为“blue”的选项时，我希望“blue”显示在 session['cart'] 中。
我正在尝试通过将 ajax 发布到名为 'cart_update.php' 的页面来执行此操作。一个星期以来，我一直在努力研究一个更高级的模型，我认为只写一些简单的东西是个好主意，这样我才能真正理解和了解到底发生了什么。非常感谢任何帮助!
这是我的代码，我知道它的出路。我只是想学习。
索引.php
<?php session_start(); ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<style type="text/css">
body {
margin-top: 200px;
}
</style>
</head>
<body>
<div align="left" style="display:block;width:200px;height:200px;background:#ccc;border:solid 1px #009966;">Color Chosen<br /><?php echo $_SESSION['cart']; ?></div>
<div align="center"><form method="post" action="">
<select id="color-selection">
<option value="red">Red</option>
<option value="blue">Blue</option>
</select>
</div>
<script type="text/javascript">
$(document).ready(function(){
$("#color-selection").on("change", function(event){
var color = $("#color-selection").val();
var add = "add";
var dataString = {color: color, type: add}; //JSON-formatted string
$.ajax({
type: "POST",
url: "cart_update.php",
data: dataString
});
});
});
</script>
</body>
</html>
这是我的 cart_update.php
<?php
session_start();
$type = json_decode($_POST['type']);
if(isset($_POST["type"]) && $_POST["type"]== $type)
{
$color = json_decode($_POST['color']);
$_SESSION['cart'] = $color;
}
?>
最佳答案
如果您不告诉我们您遇到了什么错误/警告，就很难判断什么不起作用。您应该查看您的 js 控制台(使用 Firebug 或其他调试工具)
虽然看着你的代码，我看到了一些东西..
$(document).ready(function(){
$(".add_to_cart").onClick(function(){
var dataString = "color=" + color;
$.ajax({
type: "POST",
url: "cart_update.php",
data: dataString
});
});
});
onClick 在此上下文中不起作用。请改用 on()。 http://api.jquery.com/on/
第二件事是在发送数据时应该使用 JSON 格式的字符串。
$(document).ready(function(){
$(".add_to_cart").on("click", function(event){
var dataString = {color: color}; //JSON-formatted string
$.ajax({
type: "POST",
url: "cart_update.php",
data: dataString
});
});
});
在您的 html 中，您有隐藏的字段，其中包含多个具有定义颜色的表单。我不会采用这种方法，而是在一个表单中创建一个选择列表，这样可以很容易地获取颜色的值，而且您不必为每种颜色创建一个新表单。
像这样:
<select id="color-selection">
<option value="red">Red</option>
<option value="blue">Blue</option>
</select>
然后在你的js中，你可以通过做这样的事情来获得颜色的选择:
color = $("#color-selection").val();
要在 ajax 调用完成时获取响应值，请使用 done() 回调。分配返回类型也是一种很好的做法。
$(document).ready(function(){
$(".add_to_cart").on("click", function(event){
color = $("#color-selection").val();
var dataString = {color: color}; //JSON-formatted string
$.ajax({
type: "POST",
url: "cart_update.php",
data: dataString,
dataType: "json" //This indicates the expected return-type
}).done(function(data) {
$("#thecoloris").html(data.color); //response from php. Set the color in the div id="thecolorid"
});
});
});
在您的 php 代码中，您必须解码 json 数据:
<?php
session_start();
if(isset($_POST["type"]) && $_POST["type"]=='add')
{
$color = json_decode($_POST['color']);
$_SESSION['cart'] = $color;
}
echo $_POST['color']; //Output color (that is sent to this php through ajax) - This acts as the return value data in the ajax-function done()
?>
通常输出的值应该用 json_encode($variable) 以 json 格式编码，但在这种情况下 $_POST['color'] 已经是 json 格式，因为它是以 json 格式从 js 发送到 php .
关于php - 非常简单的ajax添加到购物车，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/17903142/