javascript - 动态表单操作 URL

Question

我正在尝试在我的网站上创建一个表单，其中用户有一个文本字段，可用于输入注册号。我希望将注册号添加到操作 URL 的末尾，这样当该页面加载时，我可以使用 PHP 分解 URL 并获取号码。这是我正在寻找的示例...

<form action="http://mywebsite.com/registrations/123456789">
<input type="text" name="registrationnumber">
<input type="Submit" value="Submit">
</form>

是否可以将输入到称为注册号的文本字段中的任何内容传递到表单指向的 URL？也许更简单的方法是创建一个带有按钮的文本字段，单击该按钮时，通过在末尾添加注册号来动态创建链接到的 URL。

有人知道如何做到这一点吗？

Answer 1

事实上，您不需要表单来进行 AJAX 调用。一个简单的输入和按钮就足够了。

我创建了一个进行 AJAX 调用的函数，它将转换包含要发送给 PHP 的参数的所有键/值对的对象 params，并将其连接成 URL 字符串:

function ajax(file, params, callback) {

  var url = file + '?';

  // loop through object and assemble the url
  var notFirst = false;
  for (var key in params) {
    if (params.hasOwnProperty(key)) {
      url += (notFirst ? '&' : '') + key + "=" + params[key];
    }
    notFirst = true;
  }

  // create a AJAX call with url as parameter
  var xmlhttp = new XMLHttpRequest();
  xmlhttp.onreadystatechange = function() {
    if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
      callback(xmlhttp.responseText);
    }
  };
  xmlhttp.open('GET', url, true);
  xmlhttp.send();
}

假设您有一个输入字段:

<input id="code" type="text">
<button id="sendData">Send</button>

以下是我们如何使用函数ajax:

function sendData() {

  parameters = {
    inputValue: document.querySelector('#code').value
  };

  ajax('target.php', parameters, function(response) {
    // add here the code to be executed when data comes back to client side      
    // e.g. console.log(response) will show the AJAX response in the console
  });

}

然后，您可以使用事件监听器将按钮附加到 sendData:

document.querySelector('#sendData').addEventListener('click', sendData)