Menu
Woocommerce Menu

Ajax向服务端传递数组参数值的实例代码,Native中props具体使用详解

0 Comment

三、注释

# 单行注释
”’ 多行注释 ”’
“”” 多行注释 “””

React-Native中props具体应用详整,react-nativeprops

props就是性质,是为了描述一个组件的特征而留存的。它是父组件传递给子组件的。

使用props

透过上一个页面传递

新建二个 PropsTest.js 文件

exprot default class PropsTestextendesComponent{
  render(){
    return <Text>{this.props.name}</Text>
  }
}

在上多个页面中利用PropsTest组件

import PropsTest from './PropsTest'

<PropsTest 
  name = 'XiaoMing'
/>

潜心: 上方代码,均为代码片段。

暗许属性,以至它的效应

由于props的天性都以上个页面传递的,所以不可能改进它。但是我们能够在PropsTest文件中,给props定义一些默许的值。

exprot default class PropsTestextends Component{
  static defaultProps={
    name: 'XiaoHong'
  }
  render(){
    return <Text>{this.props.name}</Text>
  }
}

小心,defaultProps
必要采用static关键字来做静态修饰。那样,假诺上个页面未有传值,则显示的是以此暗中同意的特性。

对props实行封锁和检查

exprot default class PropsTestextends Component{
  static defaultProps={
    name: 'XiaoHong'
  }
  static propTypes={
    name: PropTypes.string,
    age: PropTypes.number,
    sex: PropTypes.string.isRequired
  }
  render(){
    return <Text>{this.props.name}</Text>
  }
}

对props里面包车型大巴个性实行项目判别,能够选取propTypes来实现,相近须要利用static关键字来修饰。

isRequired 能够钦定必填项

注意:

propTypes属性 在 react 包中,须要开始入能力运用。

props延伸操作符

ES6的新型语法

设若我们的组件要求多多质量,如下:

params = {name: 'XiaoZhang', age: 18, sex: '男'}

// 如果需要传递给下一个页面需要:
<PropsTest
  name = {params.name}
  sex = {params.sex}
  age = {params.age}
/>
// 等等,这样如果属性特别多,代码将会变得难以维护。

在ES6中得以使用新型的拉开操作符个性

<PropsTest
  {...params}
/>

老大的简要

props解构赋值

ES6的摩登语法

因此延长操作符传递的靶子,在另三个零器件中想要从当中拿到某多少个来接纳,能够用解构赋值的艺术

var {name, age} = params;

// 其他地方就可以直接引用name和age了

{name}或{age}

// 这么做的好处,同样是不需要使用如下的传统方式

{params.name}或{params.age}

上述正是本文的全体内容,希望对我们的求学抱有利于,也目的在于大家多多点拨帮客之家。

props就是性质,是为着描述三个组件的性格而留存的。它是父组件传递给子组件的。
使用prop…

jQuery Ajax向服务端传递数组参数值的实例代码,jqueryajax

在使用MVC时,向服务器端发送POST需要时一时须求传递数组作为参数值

上边接纳例子表明,首先看一下Action

[HttpPost]
public ActionResult Test(List<string> model)
{
 return Json(null, JsonRequestBehavior.AllowGet);
}

形式黄金年代,布局表单成分,然后调用serialize(卡塔尔方法赢得布局参数字符串

@{
 Layout = null;
}
<!DOCTYPE html>
<html>
<head>
 <meta name="viewport" content="width=device-width" />
 <title>Test</title>
</head>
<body>
 <div>
  <input type="button" id="btnAjax" value="发送请求" />
 </div>
 <script src="~/Scripts/jquery-1.10.2.min.js"></script>
 <script type="text/javascript">
  var tmp = '<input type="hidden" name="model" value="1" /><input type="hidden" name="model" value="2" />';
  $(function () {
   $("#btnAjax").click(function () {
    $.ajax({
     url: '@Url.Action("Test")',
     type: 'POST',
     data: $(tmp).serialize(),
     success: function (json) {
      console.log(json);
     }
    });
   });
  });
 </script>
</body>
</html>

调节和测量试验情势监视参数,当点击开关时,监视得到的参数如下

图片 1

图片 2

办法二:使用JavaScript对象作为参数字传送值,参数名是与Action方法对应的参数名,参数值是JavaScript数组

@{
 Layout = null;
}
<!DOCTYPE html>
<html>
<head>
 <meta name="viewport" content="width=device-width" />
 <title>Test</title>
</head>
<body>
 <div>
  <input type="button" id="btnAjax" value="发送请求" />
 </div>
 <script src="~/Scripts/jquery-1.10.2.min.js"></script>
 <script type="text/javascript">
  //var tmp = '<input type="hidden" name="model" value="1" /><input type="hidden" name="model" value="2" />';
  var array = ["abc","123"];
  $(function () {
   $("#btnAjax").click(function () {
    $.ajax({
     url: '@Url.Action("Test")',
     type: 'POST',
     data: {
      model:array
     },
     success: function (json) {
      console.log(json);
     }
    });
   });
  });
 </script>
</body>
</html>

图片 3

图片 4

措施三,使用Json作为参数必要,这时Ajax要求注脚Content-Type为application/json

@{
 Layout = null;
}
<!DOCTYPE html>
<html>
<head>
 <meta name="viewport" content="width=device-width" />
 <title>Test</title>
</head>
<body>
 <div>
  <input type="button" id="btnAjax" value="发送请求" />
 </div>
 <script src="~/Scripts/jquery-1.10.2.min.js"></script>
 <script type="text/javascript">
  //var tmp = '<input type="hidden" name="model" value="1" /><input type="hidden" name="model" value="2" />';
  //var array = ["abc","123"];
  $(function () {
   $("#btnAjax").click(function () {
    $.ajax({
     url: '@Url.Action("Test")',
     type: 'POST',
     contentType:'application/json;charset=utf-8',
     data: JSON.stringify({
      model:["hello","welcome"]
     }),
     success: function (json) {
      console.log(json);
     }
    });
   });
  });
 </script>
</body>
</html>

图片 5

图片 6

地方的事例使用的是ASP.NET MVC 5

总结

如上所述是笔者给大家介绍的jQuery
Ajax向服务端传递数组参数值的实例代码,希望对大家享有扶植,倘诺大家有别的难点应接给作者留言,我会及时回家大家的!

Ajax向服务端传递数组参数值的实例代码,jqueryajax
在选拔MVC时,向劳动器端发送POST央浼时不经常供给传递数组作为参数值
下边选取例子…

一、缩进

缩晋品级 必得保持后生可畏致
合法建议 统大器晚成打多少个空格
tab != 四个空格 制表符与空格的差距

标签:,

发表评论

电子邮件地址不会被公开。 必填项已用*标注

相关文章

网站地图xml地图