AJAX 如何实现表单提交

AJAX 要实现当A.html表单内下拉菜单变化后，就把form.html里的表单提交后，并把结果显示在 <div id=stock></div> 这里。 请高手指点，多谢。

A.html
HTML code

<form action='xxx/gateway.php' method='post' />
<select id="server" name="server" onchange="CheckStock()">
<option value ="server1">server1</option>
<option value ="server2">server2</option>
<option value ="server3">server3</option>
</select>
Stock:<div id=stock></div>
</form>
<script src='display.js'></script>

-----------------------------------------------------------------------------------------------------------
display.js
JScript code

var xmlHttp
function CheckStock()
{
    xmlHttp=GetXmlHttpObject();
    if (xmlHttp==null)
    {
      alert ("您的浏览器不支持AJAX！");
      return;
    }
        
    document.getElementById('stock').innerHTML="Checking";
    var server = document.getElementById( "server" ).value;

    var url = "form.html";

    xmlHttp.onreadystatechange = function() {stateChanged(sid, xmlHttp);}
    xmlHttp.open("GET",url,true);
    xmlHttp.send(null);
}

function stateChanged(num, xmlHttp)
{
    if (xmlHttp.readyState==4)
    {
        document.getElementById(num).innerHTML=xmlHttp.responseText;
    }
}

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;
}

-----------------------------------------------------------------------------------------------------------
form.html
<form action='xxxx.php' method='post' />
...
...
<input type='submit' />

提交表单的话用GET就划不来了，要用POST；把要提交的数据组合一下，最好加密；另外就是设置一下头文件。

  var myData= "name1="+document.frm.name1.value+"&name2="+document.frm.name.value;//........有多少组合多少
  xmlHttp.open("POST",url,true);
  xmlHttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
  xmlHttp.setRequestHeader("Content-length", myData.length);
  xmlHttp.setRequestHeader("xmlHttp", "close");
  xmlHttp.send(myData);

其他就没什么了。后续处理，你懂的，呵呵

$(document).ready(function(){
  typereset = function(value){
  var List = value.split('_');
  var url="../ajax.ashx";
  $.post(url,{"_type":"_ADTypeReset","adid":List[0],"adtype":List[1]},function(data){
  if(data.sta == 1)
  {
  $("#type_"+List[0]).html(data.info);
  }
  else
  {
  alert("设置失败，请重试。");
  }
   
  },"json")
  }
  })
</script>

$.ajax({
  type:"post",
  cache:false,
  url:"/ajax.ashx",
  dataType:"json",
  data:"传递的参数",
  beforeSend:function(){
  //发送ajax请求之前的动作
  },
  success:function(){
  //发送ajax请求成功后的动作
  },
  complete:function(){
  //发送ajax请求完成后的动作
  }
})


用jquery岂不是更方便 ~

+1