如何用js像携程一样动态多次生成乘机人表单。

JavaScript080

如何用js像携程一样动态多次生成乘机人表单。,第1张

这个其实应该是服务端输出的。

好吧，先不管这个。你的问题是怎么用JS输出。

首先，我们要做个重复内容的模版。JS模版有很多啦，像Handlebars呀等等。这里就用最简单的字符串拼接方式吧。

var render = function (i) {

    var output = ""

    output += "<div>第" + i + "位乘机人</div>"

    output += "<label>姓名</label>"

    ...

    return output

}

OK，这就是我们要的。

接下来获取已经填写的乘机人的数量。

var personsLength = $(".person").length

这个你自己看是从DOM里拿，还是从数据里拿。个人建议从数据里拿比较好。

var personsLength = persons.length

然后渲染出我们要的内容

var output = render(personsLength)

再插入页面

根据图示，似乎是每次只填一个人的详情。那我们就直接替换就好了。

$(".form-wrapper").html(output)

或者你想每个都列出来

$(".form-wrapper").append(output)

这样只要在每次点击添加按钮的时候，做上述的事情就可以了。

$(".btn-add").on("click", function () {

    var personsLength = persons.length

    var output = render(personsLength)

    $(".form-wrapper").append(output)

})

可以手动构建一个FormData进行表单提交，代码如下：

var form = new FormData()

//添加参数

form.append('name', 'jack')

form.append('age', 20)

//使用xmlhttprequest发起请求

var xhr = new XMLHttpRequest()

xhr.open('post', '这里添上请求的url', true)

xhr.onreadystatechange = function() {

    if(xhr.readyState == 4) {

        //成功

    }

}

//执行请求

xhr.send(form)