Question

我需要另一组眼睛，因为我此时正在倒退。有php / javascript来自动购买购物车＆＃39;当用户输入数据时。但是，代码之间似乎存在冲突。这是我第一次实现AJAX方法。您可以在HTML中看到的表需要允许用户输入，然后使用JS与PHP进行通信。但是，在这个关键时刻，这种情况并没有发生。

用户应该看到价值变化＆＃39; onchange＆＃39;你可以看到。

这里有足够的HTML来查看用户输入/返回：

＆＃13;

<html>
<head>
<script src="PurchaseTableClientSide.js"></script>
</head>
<body>

<form>
<table border="1">
  <tr>
    <th>Item Name<br></th>
    <th>Price</th>
    <th>Quantity</th>
    <th>Total</th>
  </tr>
  <tr>
    <td>CD 1<br></td>
    <td>$12.50</td>
    <td><input type="number" id="quantityCD1" step="1" min="0" onchange="calculatePrice()"></td>
    <td id="totalCD1">0.00</td>
  </tr>

＆＃13;

这是PHP：

＆＃13;

<?php
error_reporting(0);

//variable to store the result.
$xml = new SimpleXMLElement("<response/>");

if(isset($_GET['qCD1']) && isset($_GET['qCD2']) && isset($_GET['qMVA'])) {
	$totalCD1 = 12.50 * $_GET['qCD1'];
	$totalCD2 = 12.95 * $_GET['qCD2'];
	$totalMVA = 19.95 * $_GET['qMVA'];
	$subtotal = $totalCD1 + $totalCD2 + $totalMVA;
	$shipping = $subtotal * 0.5;
	$total = $subtotal + $shipping;

	//http://php.net/manual/en/simplexmlelement.addchild.php
	$xml->addChild('totalCD1', $totalCD1);
	$xml->addChild('totalCD2', $totalCD2);
	$xml->addChild('totalMVA', $totalMVA);
	$xml->addChild('subtotal', $subtotal);
	$xml->addChild('shipping', $shipping);
	$xml->addChild('total', $total);
	$xml->addChild('error', False);

} else {
	//Inform the client that there was an error.
	//Currently not used, but sounds like a cool idea.
	$xml->addChild('error', True);
}

//Define the content as being XML response
header("Content-Type:text/xml");
//Send it back to the user
echo $xml->asXML();

?>

＆＃13;

这是javascript：

＆＃13;

 

//Global variable for the AJAX connection.
var xmlHttp;

function calculatePrice()
{
	var quantityCD1 = document.getElementById("quantityCD1").value;
	var quantityCD2 = document.getElementById("quantityCD2").value;
	var quantityMovieA = document.getElementById("quantityMovieA").value;
	
	xmlHttp=GetXmlHttpObject();
	if (xmlHttp==null)
	{
		alert ("Your browser does not support AJAX!");
		return;
	}
	
	var url="purchaseTable.php";
	url=url+"?qCD1="+quantityCD1;
	url=url+"&qCD2="+quantityCD2;
	url=url+"&qMVA="+quantityMovieA;
	url=url+"&sid="+Math.random();
	xmlHttp.onreadystatechange=stateChanged;
	xmlHttp.open("GET",url,true);
	xmlHttp.send(null);
}

function stateChanged()
{
	//Check to make sure the response is good.
	if (xmlHttp.readyState==4) {
		
		//Get an XML parser out of it.
		var xmlDoc = xmlHttp.responseXML.documentElement;
		
		//Pull the data from the XML response and put it in the HTML.
		//http://www.ajaxtutorial.net/index.php/2006/02/28/ajax-with-php-using-responsexml/
		document.getElementById("totalCD1").innerHTML = xmlDoc.getElementsByTagName('totalCD1')[0].firstChild.nodeValue;
		document.getElementById("totalCD2").innerHTML = xmlDoc.getElementsByTagName('totalCD2')[0].firstChild.nodeValue;
		document.getElementById("totalMVA").innerHTML = xmlDoc.getElementsByTagName('totalMVA')[0].firstChild.nodeValue;
		document.getElementById("shipping").innerHTML = xmlDoc.getElementsByTagName('shipping')[0].firstChild.nodeValue;
		document.getElementById("total").innerHTML = xmlDoc.getElementsByTagName('total')[0].firstChild.nodeValue;
	}
}

//Connect to the PHP server.
function GetXmlHttpObject()
{
	var xmlHttp=null;
	try
	{
		xmlHttp=new XMLHttpRequest();
	}
	catch (e)
	{
		try
		{
			xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
		}
		catch (e)
		{
			xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
		}
	}
	return xmlHttp;
}

＆＃13;

AJAX实现：未捕获的TypeError：无法读取null的属性'documentElement'

0 个答案: