存储和输出表单数据

时间:2016-11-11 01:39:49

标签: javascript jquery ajax forms

我正在创建一个URL-Shortener,但是在获取jquery表单值方面存在一些问题,因此我可以输出缩短的URL文本。

Here是我正在使用的形式:

<form name="urlForm">
    <input type="text" name="url">
    <button id="submit" type="button">Submit</button>
    <p>Result:
        <!-- Output area. -->
        <span id="url-output"></span>   </p>
</form>

here是我用来处理表单数据的JavaScript:

 // receive the form when "submit" button is clicked
    $('form[name=urlForm]').submit(function (event) {
        console.log('form submitted');
        // get the data in the form
        // there are many ways to get this data using jQuery (you can use the class or id also)
        var formData = {
            //element[attribute=value]
            'name': $('input[name=url]').val(),
        };
    // process the form
    $.ajax({
        type: 'POST', // define the type of HTTP verb we want to use (POST for our form)
        url: '/createShorter', // the url where we want to POST
        data: formData, // our data object
        dataType: 'json', // what type of data do we expect back from the server
        encode: true
    })

        // using the done promise callback
        .done(function (data) {
            // log data to the console so we can see
            console.log(data);

            // here we will handle errors and validation messages
        });

    // stop the form from submitting the normal way and refreshing the page
    event.preventDefault();
});

我认为问题在于我如何收集 formData 变量中的数据。但是,尽管查看了文档和几个不同的尝试,我所做的一切似乎都没有输出任何相关的值。我采取了不好的做法吗?

如何根据我需要的信息解析表单?

1 个答案:

答案 0 :(得分:0)

代码段无效(严格安全性),请查看 PLUNKER 。 Plunker演示了使用正确制作的表单,使用普通的JavaScript source = source.Where(o => o.TaskStartDate.Value.Date == dtStartDate.Date); ,发布到真实的测试服务器并接收响应的json。详细信息在Snippet中进行了评论。

SNIPPET(无效)

&#13;
&#13;
XMLHttpRequest()
&#13;
&#13;
&#13;