ajax在localhost上不起作用

Question

I have a simple Ajax calculation but it doesn't work

that's the JavaScript Code

<script>


   function showFees() {
        e.preventDefault();
        var weight = ('weight').val;
        var ship_type== ('ship_type').val;
        var eol== ('eol').val;
        if (weight == 0) {
            document.getElementById("txtHint").innerHTML = "";
            return;
        } else {
            var xmlhttp = new XMLHttpRequest();
            xmlhttp.onreadystatechange = function() {
                if (this.readyState == 4 && this.status == 200) {
         document.getElementById("txtHint").innerHTML =this.responseText;
                }
            };
            xmlhttp.open("GET", "sdr.php?weight=" + weight "ship_type" + ship_type + "eol" + eol, true);
            xmlhttp.send();
        }
    }

that's my form

<form>

 <label>weight:</label> 

 <input type="number" name="weight" min="0" value="0">

 Ship Type:

 <select name="ship_type">

        <option value="1">Tankers of Crude Oil</option>
        <option value="2">Tankers of Petroleum Products</option>

      </select>
      Laden Or Ballast: 
      <select name="eol">
                <option value="0">Ballast</option>
                <option value="1">Laden</option>
              </select>   
      <input type="submit" onclick="showFees()" value="calc">
      </form>
      <p>Suggestions: <span id="txtHint"></span></p>

and my sdr page to calculate the final result

$weight;
$i=0;
$wpt=0/*weight per ton result*/;
$ship_type;
$eol;/*empty or loaded*/
$channel_weights=array(5,5,10,20,30,50,10000);

$weight = $_REQUEST['weight'];
$ship_type = $_REQUEST['ship_type'];
$eol = $_REQUEST['eol'];
while($weight!=0){
    if($weight>=$channel_weights[$i]){
        $wpt+=$channel_weights[$i]*$ship_load_vlues[$eol][$ship_type][$i];
        $weight-=$channel_weights[$i];
    } 
    else{
        $wpt+=$weight*$ship_load_vlues[$eol][$ship_type][$i];
        $weight=0;
    }

    $i++;
}

$final = $wpt*$float_sdr*1000;
echo $final === "0" ? "wrong data" : $final;
 ?>

I think echo must return to span with ID 'txtHint' but it doesn't return any and if I tried to put alert in java script doesn't work either and I tried to add ajax library and doesn't work also

Answer 1

You're using e.preventDefault(); but you don't have e defined at this point. Pass it as an argument on the button:

 onclick="showFees(event)"

Capture it in the function:

function showFees(e) {

Fix the bad URL format and use encodeURIComponent on the values:

xmlhttp.open("GET", "sdr.php?weight=" + encodeURIComponent(weight) + "&ship_type" + encodeURIComponent(ship_type) + "&eol" + encodeURIComponent(eol), true);

Fix these two lines which are nowhere near correct:

var ship_type== ('ship_type').val;
var eol== ('eol').val;

Should be:

var ship_type = document.querySelector('select[name=ship_type]').value;
var eol = document.querySelector('select[name=eol]').value;

Open the browser dev tools (F12) and look at the console, these issues would be producing errors which would help you to narrow the problems down.