如何在不重新加载页面的情况下使用AJAX将表单值发送到php

how to send form values to php using AJAX without reloading page?

本文关键字：AJAX 情况下 表单 php 新加载 加载      更新时间：2023-09-26

我有一个AJAX函数，它在服务器中启动PHP函数，而无需重新加载页面并发回生成的信息，但我还需要向该PHP脚本发送一个表单输入值。我该怎么做？

AJAX：

    function sorting() 
{
  var ajax = getRequest();
  ajax.onreadystatechange = function()
  {
      if(ajax.readyState == 4)
      {
          document.getElementById('main').innerHTML = ajax.responseText;
      }
  }
  document.getElementById('main').innerHTML = "<br/><img src=img/ajax-loader.gif><br/><br/>";
  ajax.open("POST", "sorting.php", true);
  ajax.send(null);
}

截断的HTML表单：

 <form method="post"  action="" name="dateform" id="dateform">
<select name="n_metai" id="n_metai" ><option value="1">1</option>... 
</select>   
<select name="n_menuo" id="n_menuo" ><option value="2">2</option>... 
</select> 
<input type="text" name="skaitliukas" id="skaitliukas" size="3" value="1" title="Mažiausias skambučių pasikartojimas">
<input type="checkbox" name="nuliniai" id="nuliniai"   value="1" title="Rodyti tik su nulinėmis trukmėmis">
<button name="submit_button" onclick='sorting(); return false;'> Pateikti</button>
</form>

问题是这一行：

ajax.send(null);

如果要发送GET请求，则不向send调用传递任何内容（或null），但您正在传递POST数据，因此必须将数据传递到那里
这样做的一个基本方法是：

var frm = document.getElementById('dateform'),
data = [];//empty array
for (var i=0;i<frm.elements.length;i++)
{
    data.push(frm.elements[i].name + '=' + frm.elements[i].value);
}
ajax.send(data.join('&'));

您可以使用jQuery来实现这一点。

$.ajax({
type: "post", //methos
url: "yourpage.php", //where to post
data: { //parameters
    n_metai: $('select[name="n_metai"] option:selected').val(), 
    skaitliukas: $('#skaitliukas').val()
    //etc...
}
}).done(function(msg) {
    alert( "Done: " + msg ); //display message box with replay
});
相关文章：