ajax 传递2个参数类型

AJAX是一种用于在不重新加载整个页面的情况下，通过后台服务器与客户端进行异步通信的技术。它可以发送和接收数据，并将其显示在页面上，而无需刷新整个页面。更重要的是，通过使用AJAX，我们可以传递多种类型的参数，包括字符串和数字，以便更灵活地与后台进行交互。

举一个简单的例子来说明如何使用AJAX传递两个参数。假设我们有一个网站，其中包含一个搜索框和一个按钮，用户可以输入关键字并点击按钮来搜索相关内容。当用户点击按钮时，我们将使用AJAX发送两个参数：搜索关键字和搜索类型。在后台服务器中，我们将使用这两个参数来执行相应的查询操作，并将结果返回给客户端。通过使用AJAX进行异步通信，我们可以实现在不刷新整个页面的情况下，显示搜索结果。

//HTML代码
Search: 
Type: Type 1
Type 2
Type 3Search


//JavaScript代码
function search() {
  var keyword = document.getElementById("keyword").value;
  var searchType = document.getElementById("searchType").value;
  
  var xhttp = new XMLHttpRequest();

  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      document.getElementById("searchResults").innerHTML = this.responseText;
    }
  };
  xhttp.open("GET","search.PHP?keyword=" + keyword + "&type=" + searchType,true);
  xhttp.send();
}

在上面的例子中，我们创建了一个search函数，该函数会在用户点击搜索按钮时触发。首先，我们从HTML中获取关键字和搜索类型的值，并将它们存储在变量keyword和searchType中。接下来，我们创建一个XMLHttpRequest对象xhttp，并定义一个onreadystatechange事件处理程序，以处理从服务器返回的响应。

当readyState等于4且status等于200时，表示服务器返回了一个成功的响应。在这种情况下，我们将响应文本设置为具有id“searchResults”的div元素的innerHTML，从而将搜索结果显示在页面上。最后，我们使用open和send方法将请求发送到服务器。请求的URL是“search.PHP”，我们通过在URL的末尾附加查询字符串的方式将参数传递给服务器。

在后台的服务器代码中，我们可以通过检查查询字符串中的参数来执行相应的操作。在这个例子中，我们使用PHP来处理请求。以下是一个简单的search.PHP文件的示例代码：

在search.PHP文件中，我们使用PHP的$_GET超全局变量来获取从前台传递过来的关键字和搜索类型。然后，在执行与关键字和搜索类型相关的查询操作后，我们将搜索结果存储在变量$searchResults中，并使用echo语句将结果返回给客户端。

总结来说，通过使用AJAX传递两个参数，我们可以实现与后台服务器的灵活交互。通过将参数传递给后台，我们可以执行各种操作，并将结果实时显示在页面上，而无需刷新整个页面。这使得我们能够创建更具响应性和用户友好的网站。