AJAX Request while reloading Page partial

Question

I'm new registered but was a quiet reader for years. To this Point I have found the answer for all my questions by searching Stack Overflow, but now I have to ask...

I'm new with AJAX and I am building a test ap for a AJAX Request. I followed the example from this page. http://www.w3schools.com/php/php_ajax_database.asp

Info about my test ap: Its all about programming a wizard. This code is from my "wizzard.php".

The index.php is loading the "wizzard.php" via JQUERY in a Content div with some id. So all the includes for the Framework etc. are in the index.php. So far... The wizard works and is shown correctly in the browser.

now the Problem: The wizard itself has a button "Next". If you click it you see Another "Page" from the wizard (Step). html looks like this:

    <div id="wiz1step3">

      <h4 class="widgettitle">Step 3: Overview</h4>
      <div class="par terms" style="padding: 0 20px;">
        <p>Hier werden zusammenfassend.</p>
        <p>Alle Informationen gesammelt die das Hinzufügen betreffen</p>
        <div id="DeviceTypeIdHint"><b>DeviceTypeID will be listed here...</b>
        </div>

        <p>
          <input type="checkbox" />I agree with the terms and agreement...</p>
      </div>

So I have a "Div Hint" like in the Example. This is where the code from AJAX Request should be showed.

On Page 1 from the wizard I have a dropbox which Shows some Items from the database. I am going to proceed the Name of the Item via AJAX to the database und my goal is to Show the item-database-id in the wizard on Page 3. (the pages are controlled with JQUERY)

So I have a jQuery Function at wizzard.php which should do the AJAX-Voodoo Stuff.

It Looks like this:

    jQuery('.buttonNext').click(function(e) {
          //Hier kommt der AJAX Aufruf für das Besorgen der ID des        ausgewähltenDevices

          e.preventDefault();
          var deviceTypeModel = jQuery('#selection option:selected').text();

          if (deviceTypeModel == "") {
            document.getElementById("DeviceTypeIdHint").innerHTML = "Es wurde keine    ID Zugeordnet";
          } else {
            if (window.XMLHttpRequest) {
              //code for IE7+, Firefix, Chrome, Opera, Safari                 
              xmlhttp = new XMLHttpRequest();
            } else {
              // code for IE6, IE5
              xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
            }

            xmlhttp.onreadystatechange = function() {
              alert(xmlhttp.readyState)
              if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                document.getElementById("DeviceTypeIdHint").innerHTML = xmlhttp.responseText;
              }
            }

            xmlhttp.open("GET", "getDeviceTypeIdFromDeviceTypeModel.php?q=" + deviceTypeModel, true);
            xmlhttp.send;
          }

In the same direction like the index.php and the wizzard.php is "GetDeviceTypeIdFromDeviceTypeModel.php". located. This is the file that should do the AJAX-Voodoo trick.

It Looks like this:

<?php

    /* 
     * nimmt AJAX Anfragen entgegen und führt sie aus
     */
    include_once '\includes\DataAccess.php';

    $DataAccess = new DataAccess();
    $DeviceTypeNameFromRequest = $_GET['q'];
    $AJAX_DeviceTypeId = $DataAccess ->GetDeviceTypeIdForDeviceTypeModel($DeviceTypeNameFromRequest);
    echo $AJAX_DeviceTypeId;

I have debugged the JQUERY stuff until the Point

    if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
      document.getElementById("DeviceTypeIdHint").innerHTML = xmlhttp.responseText;
    }

The Problem is that the readyState is always 1. My xmlhttp.responseText is always empty.

I can't figure out why this Request don't work. The Div-Hint is not changing.

ps. sorry for this horrible formatting this is my first post... this grammar correction annoys me and I'm struggling with the "code snipped tool" XD

Answer 1

问题是您使用的是xmlhttp.send而不是xmlhttp.send() 。