jquery name value 拼接url参数

原创

mob649e815b5994 2023-12-15 06:56:51 ©著作权

©著作权归作者所有：来自51CTO博客作者mob649e815b5994的原创作品，请联系作者获取转载授权，否则将追究法律责任

jquery name value 拼接url参数

在Web开发中，我们经常需要将数据作为URL参数传递给后端服务。而jQuery是一个流行的JavaScript库，可以方便地操作DOM元素和处理AJAX请求。本文将介绍如何使用jQuery来拼接URL参数的name/value对。

1. 创建一个表单

我们首先需要创建一个表单，以便用户输入相关数据。假设我们的表单有两个输入框，一个用于输入姓名，另一个用于输入年龄。

<form id="myForm">
  <label for="name">姓名：</label>
  <input type="text" id="name" name="name"><br>
  
  <label for="age">年龄：</label>
  <input type="number" id="age" name="age"><br>
  
  <button type="submit">提交</button>
</form>

以上代码中，我们给输入框定义了id和name属性，这样在拼接URL参数时可以方便地获取输入框的值。

2. 处理表单提交事件

接下来，我们需要使用jQuery来处理表单的提交事件，并将输入框的值拼接为URL参数。

$('#myForm').submit(function(e) {
  e.preventDefault(); // 阻止表单默认提交行为
  
  var name = $('#name').val(); // 获取姓名的值
  var age = $('#age').val(); // 获取年龄的值
  
  var url = ' + encodeURIComponent(name) + '&age=' + encodeURIComponent(age);
  
  window.location.href = url; // 跳转到带参数的URL
});

以上代码中，我们使用submit方法来监听表单的提交事件。在处理事件的回调函数中，我们首先使用val方法获取输入框的值，并使用encodeURIComponent方法对值进行编码，以防止特殊字符对URL造成影响。然后，我们使用字符串拼接的方式将name/value对拼接为URL参数，并将拼接后的URL赋值给window.location.href，这样页面就会跳转到带参数的URL。

3. 完整示例

下面是一个完整的示例，演示了如何使用jQuery拼接URL参数。

<!DOCTYPE html>
<html>
<head>
  <title>拼接URL参数示例</title>
  <script src="
</head>
<body>
  <form id="myForm">
    <label for="name">姓名：</label>
    <input type="text" id="name" name="name"><br>
    
    <label for="age">年龄：</label>
    <input type="number" id="age" name="age"><br>
    
    <button type="submit">提交</button>
  </form>

  <script>
    $('#myForm').submit(function(e) {
      e.preventDefault(); // 阻止表单默认提交行为
      
      var name = $('#name').val(); // 获取姓名的值
      var age = $('#age').val(); // 获取年龄的值
      
      var url = ' + encodeURIComponent(name) + '&age=' + encodeURIComponent(age);
      
      window.location.href = url; // 跳转到带参数的URL
    });
  </script>
</body>
</html>