前台数据传输

最新推荐文章于 2020-08-06 10:45:00 发布

guod369

最新推荐文章于 2020-08-06 10:45:00 发布

阅读量131

点赞数

本文链接：https://blog.csdn.net/gddd123456/article/details/105005547

版权

网络选图

数据提交

同步提交

方式一：

<body>
    <form action="form_action.asp" method="get">
        <p>
            用户名: <input type="text" name="fname" />
        </p>
        <p>
            密码: <input type="text" name="lname" />
        </p>
        <input type="submit" value="Submit" />
    </form>
</body>

方式二：

<body>
    <form action="login" method="get" id="myForm">
        <p>
            用户名: <input type="text" name="fname" />
        </p>
        <p>
            密码: <input type="text" name="lname" />
        </p>
        <input type="button" value="Submit Form" />
    </form>
</body>
<script type="text/javascript">
    $(document).ready(function() {
        $('input:button').click(function() {
            $('#myForm').submit();
        });
    });
</script>

方式三：

<div>
    <a href="javascript:doSubmit();">提交方式四</a>
</div>
function doDetails(index) {
    var orderListData = $ {
        orderInfo
    };
    var thisRow = JSON.stringify(orderListData[index]);
    var form = $("<form method='post'></form>");
    form.attr({
        "action": "${base}/member/order/orderDetails.jhtml"
    });
    // 代码规范：单引号和双引号的使用
    var input1 = $('<input />').attr('type', 'hidden').attr('name', 'orderI').val(thisRow);
    var input2 = $('<input />').attr('type', 'hidden').attr('name', 'token').val(getCookie("token"));
    form.append(input1);
    form.append(input2);
    $(document.body).append(form);
    form.submit();
}

方式四：

<body>
    <form action="login" method="get" id="myForm">
        <p>
            用户名: <input type="text" name="fname" />
        </p>
        <p>
            密码: <input type="text" name="lname" />
        </p>
        <input id="sub" type="button" value="提交" />
    </form>
</body>
<script type="text/javascript">
    $("#sub").click(function() {
        var form = new FormData(document.getElementById("myForm"));
        alert(form);
        $.ajax({
            url: "login",
            type: "POST",
            processData: false,
            contentType: false,
            data: form,
            dataType: "JSON",
            success: function(result) {
                alert(result.user);
            }
        });
    });
</script>

异步提交

方式一：

$('#sub').click(function() {
    $.ajax({
        url: "#",
        type: "POST",
        data: {},
        dataType: "JSON",
        success: function(result) {
            alert(result.user);
        }
    });
});

方式二：

$('#sub').click(function() {
    $.post('/addUsers', $('#hello').serialize(),
    function(data) {
        console.info(data);
    },'json');
});

异步和&同步比较

form是同步提交，而ajax是异步提交。
ajax只是会请求到数据不会进行页面的跳转，而form会页面的跳转。

数据请求

JSON的字符串解析成JSON数据

// 定义一个一个对象
var data={name:'goatling'}
// 解析成JSON字符串
JSON.stringify(data)

数据回显

// 定义一个字符串
var data='{"name":"goatling"}'
// 解析对象
JSON.parse(data)
结果是：
name:"goatling"

特别提醒：数据的转换需要根据请求的接口转换，如果请求的接口中带@RequestBody注解，需要传输的是JSON字符串，此时需要使用JSON.stringify(data)；进行数据的转换，如果请求的接口中不带@RequestBody注解，此时可以直接传输数据的对象。

JavaScript解析时间日期回显问题

时间格式处理方式一

function func(fmt) {
    var year = 1900 + fmt.year;
    var month = (fmt.month + 1) < 10 == 1 ? "0" + (fmt.month + 1) : (fmt.month + 1);
    var day = fmt.date < 10 ? "0" + fmt.date : fmt.date;
    var hours = fmt.hours < 10 ? "0" + fmt.hours : fmt.hours;
    var minutes = fmt.minutes < 10 ? "0" + fmt.minutes : fmt.minutes;
    var seconds = fmt.seconds < 10 ? "0" + fmt.seconds : fmt.seconds;
    return year + "-" + month + "-" + day + " " + hours + ":" + minutes + ":" + seconds;
}
var aa = 
eval("("+ "{\"date\":18,\"hours\":14,\"seconds\":9,\"month\":9,\"nanos\":0,\"timezoneOffset\":-480,\"year\":117,\"minutes\":50,\"time\":1508309409000,\"day\":3}" + ")");
    alert(func(aa));
</script>

时间格式处理方式二

var d = new Date('Thu May 12 2016 08:00:00 GMT+0800 (中国标准时间)');  
youWant=d.getFullYear() + '-' + (d.getMonth() + 1) + '-' + d.getDate() + ' ' + d.getHours() + ':' + d.getMinutes() + ':' + d.getSeconds();  
//yyyy-MM-dd hh:mm:ss

请求成功后的处理

guod369

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前台数据传输

网络选图数据提交同步提交方式一：<body> <form action="form_action.asp" method="get"> <p> 用户名: <input type="text" name="fname" /> </p> ...
复制链接

扫一扫