0

これは、送信ボタンのクリック時に Process 関数を呼び出す私の html ファイルです。私の問題は、javascript関数であるプロセス関数を呼び出すと、ホールページが更新され、ajaxが何も返さず、#loadscreenが何も表示されないことです 

<head><script src="jquery-1.9.1.min.js"></script></head>
<form  name="myForm">
Category
        <select name="category">
            <option>..........</option>
            <option>.........</option>
            <option>.......</option>
            <option>......</option>

        </select>
        <br/><br/>


Experience      <br/>   
        <select name="experience">
            <option>......</option>
            <option>......</option>
            <option>......</option>
            <option>......</option>
            <option>......</option>


        </select>
        <br/><br/>

Location            
        <select name="location">
            <option>......</option>
            <option>......</option>
            <option>......</option>
            <option>.......</option>
            <option>........</option>
        </select>

<input type="submit" name="submit" value="Search" onclick="Process(); return false;">    </input>           
</form>
<div id="container" style="z-index: 1; width: 830px; height: 356px; position: absolute; top: 194px; left: 218px"></div>
<div id="loadScreen" style="display: none;width: 100%; height: 100%; top: 0pt;left: 0pt;">
<div id="loadScr" style="filter: alpha(opacity = 65);  z-index: 9999;border: medium        none; margin: 0pt; padding: 0pt; width: 100%; height: 100%; top: 0pt;left: 0pt; background-color: rgb(0, 0, 0); opacity: 0.2; cursor: wait; position: fixed;"></div>
<div id="loader"  style="z-index: 10000; position: fixed; padding: 0px; margin: 0px;width: 30%; top: 40%; left: 35%; text-align: center;cursor: wait; ">
<img src="busy.gif" alt="loading" />
</div>
</div>

ajax を使用する Process 関数のコードとビジー ページのコードを次に示します。

function Process( )
{
$('#loadScreen').show(function() {
var exp = document.forms['myForm']['experience'].value;
      var loc = document.forms['myForm']['location'].value;
      var cat = document.forms['myForm']['category'].value;

    if (window.XMLHttpRequest)
      {// code for IE7+, Firefox, Chrome, Opera, Safari
        xmlhttp=new XMLHttpRequest();
      }
    else
      {// code for IE6, IE5
        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
      }
        xmlhttp.onreadystatechange=function()
         {
            if (xmlhttp.readyState==4 && xmlhttp.status==200)
             {

                document.getElementById("container").innerHTML=xmlhttp.responseText;
             }
      }

    xmlhttp.open("GET","filter.php?experience="+ exp +"&location=" + loc + "&category=" + cat, true);
    xmlhttp.send();
});
}
4

1 に答える 1

1

あなたが持っている方法でそれを行う方法はわかりませんが、機能が既に組み込まれているJQueryライブラリを使用できます。例:

$.ajax({
   type: 'get',
   url: 'filter.php',
   data: {
      experience: exp,
      location: loc,
      category: cat
   }, 
   beforeSend: function() {
      //code to be executed while script is executing.
      $('#your_img_loader').fadeIn(500);
   },
   success: function(result) {
      //done executing hide loader
      $('#your_img_loader').hide();

      /* OTHER CODE */
   }
});

URL のすぐ隣に GET パラメーターを渡したい場合は、次のようにすることもできます。

url: 'filter.php?experience='+exp+'&location='+loc+'&category='+cat

data: {}そしてパーツを外す

于 2013-03-27T19:00:11.373 に答える