动态表单操作URL

时间:2018-06-10 20:21:23

标签: javascript php jquery

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

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

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

任何人都知道这样做的方法吗?

1 个答案:

答案 0 :(得分: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)