jQuery param()简介与实例

411 阅读2分钟

jQuery param()

jQuery param()简介

在jQuery中,param()是一个定义为Ajax方法的函数,它用于表示一个对象或一个数组的连续字符串;当进行Ajax请求时,URL可以使用这些序列化或连续字符串的值来调用请求。一般来说,我们可以把param()函数定义为一个从内部提供的元素转换为连续字符串的函数,如果有任何普通的对象被传递,它的属性,如名称或价值,包含输入元素和这些属性,这个函数有选项,通过设置传统值为true来禁用全球。

jQuery param()的工作原理与实例

在这篇文章中,我们将看到jQuery的param()函数,它是一个Ajax方法,用于发出Ajax请求;我们需要使用这些序列化的字符串,在内部应用这个函数后得到的元素,它包含了返回值作为一个数组或对象的连续字符串。在jQuery中,param()函数被URL用来进行Ajax请求,通过将元素转换为连续的字符串作为这个param()函数的输出,或者我们可以说这个函数返回一个数组或普通对象的序列化字符串表示。

一般来说,这个函数是在创建任何按钮并首次点击时使用的,这将创建一个对象或数组的连续字符串表示,这将反过来导致一个字符串,作为Ajax请求的一部分被发送到服务器。

让我们看看如何使用这个函数的语法和例子。

语法

$.param(object, traditional_style)

参数

  • **对象。**这个参数用来指定需要被序列化的字符串或对象。这个参数需要强制指定。
  • 传统。这个参数用于指定param()函数的序列化风格,需要使用或不使用传统的浅层风格,这是一个需要指定的布尔值,这个参数是可选的。

该函数返回传递给该函数的数组或对象的转换后的序列化字符串表示。

让我们考虑一个如何声明param()函数的例子。

例子 #1

代码

<!DOCTYPE html>
<html>
<head>
<title>
Educba Training Institute
</title>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
</head>
<body style="text-align:left";>
<h1 style = "background-color:red" >
EDUCBA Jquery
</h1>
<h2 style = "color:blue">Demonstration of jQuery param() function</h2>
<button>Click me</button>
<div>
<p> Hello welcome to Educba Instituion </p>
</div>
<!-- Script using param() method -->
<script>
$(document).ready(function() {
jqpmobj = new Object();
jqpmobj.Fullword = "EDUCBA ";
jqpmobj.Firstword = "Jquery ";
jqpmobj.Secondword = "Param() ";
jqpmobj.Thirdword = "Function ";
jqpmobj.Wordcolor = "Blue";
$("button").click(function(){
$("div").text($.param(jqpmobj));
});
});
</script>
</body>
</html>

输出

JQuery param() 1

在点击上面截图中的 "点击我 "按钮后,我们得到如下序列化的字符串,如上面截图所示。

After clicking on the “click me” button

在上面的程序中,我们可以看到我们写了HTML代码,脚本源指向标签内的jQuery文件,要在标签内写jquery代码,我们必须在 document.ready(),它只在DOM准备好执行javascript时运行。然后我们写一个函数,在这个函数中,我们首先使用 "Object() "函数创建一个对象,然后使用这个对象调用这些词作为参考,如 "Fullword"、"Firstword"、"Seconword "和 "Thirdword "以及 "Wordcolor",这些都将指定需要在输出中显示或表示为一个序列化的字符串,它将被打印,如上面的截图所示。

在输出中,我们可以看到每个字都被"%20&"隔开,因为我们在上面的输出中指定了全字和单字的空格被替换。所以在上面的代码中,我们已经传递了对象 "jqpmobj",所以我们必须指定任何名称或价值属性,这里是 "Fullword "或 "Firstword",等等。所以这个param()函数当对象被传递时,这些名称或值的参数被添加到URL字符串中,它被动态地修改为历史API。

现在我们将看到一个创建三个对象的例子,并显示解码后的对象,在下面的代码中使用decodeURIComponent()完成。

例子#2

代码

<!DOCTYPE html>
<html>
<head>
<title> Educba Institution </title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script></head>
<body>
<h1> JQuery concepts</h1>
<h2> Demonstration of using the jQuery param(). </h2>
<p>Hello! Welcome to Educba </p>
<button> Click me</button>
<p id = "p1"> Javascript </p>
<p id = "p2"> JQuery </p>
<p id = "p3"> Php </p>
<script>
$(document).ready(function() {
var com_obj1= new Object ({
p: [ 7, 1, 6 ] });
var com_obj2= new Object ({
p: { q: 7, r: 1, s: 6}, t: [ 3, 9] });
var com_obj3 = new Object({
p: {u: 4, v: 4}, w:[2, 8] });
$("button").click(function() {
var x = decodeURIComponent( $.param(com_obj1));
$("#p1").text(x);
var y = decodeURIComponent( $.param(com_obj2));
$("#p2").text(y);
var z = decodeURIComponent( $.param(com_obj3));
$("#p3").text(z);
});
});
</script>
</body>
</html>

输出

JQuery param() 3

在点击上面的截图中的 "click me "按钮后,显示3个对象"、Javascript"、"Jquery "和 "Php "的解码代码,它显示在下面的截图中。

concepts

在上面的代码中,我们可以看到我们正在使用decoseURIComponent(),它是用来对对象进行解码的,所以有点复杂;在上面的代码中,我们也可以看到我们正在创建3个对象,解码后的代码如上面的输出截图中所示。

总结

在这篇文章中,我们得出结论,jQuery提供了一个叫做param()的函数,它是用来以序列化的方式表示对象的数组。在这篇文章中,我们看到了如何声明和使用param()函数的语法和例子。在这篇文章中,我们还看到了一个简单的创建对象的例子,然后在另一个例子中,我们还看到了复杂对象的创建和使用param()和decodeURIComponent()函数对对象进行解码。