form进行ajax请求的完整代码

最新推荐文章于 2024-05-22 14:03:33 发布

原创最新推荐文章于 2024-05-22 14:03:33 发布 · 1k 阅读

0 ·

CC 4.0 BY-SA版权

本文介绍了一个使用HTML创建的表单示例，其中包括姓名、公司名称和职务的输入字段，并通过AJAX以POST方式将数据发送到后端。演示了如何利用jQuery的$.ajax方法实现异步数据提交。

html代码

<form id='form' name='form' action="后台地址" method='post'>
            <div class='formdiv'>
                <label>姓&emsp;&emsp;名：</label>
                <span style='color:red'>*</span>
                <input type="text" name="username" id="name" placeholder="请输入姓名">
            </div>
            <div class='formdiv'>
                <label>公司名称：</label>
                <span style='color:red'>*</span>
                <input type="text" name="companyName" id="companyName" placeholder="请输入公司名称">
            </div>
            <div class='formdiv'>
                <label>职&emsp;&emsp;务：</label>
                <span style='color:red'>*</span>
                <input type="text" name="position" id="position" placeholder="请输入职务">
           </div>
</form>

js代码

$(function(){
        $.ajax({
            type:'POST',
            url:'后台地址',
            dataType:"json",
            ContentType:'application/x-www-form-urlencoded',
            data: {username:$('#name').val(),
                    companyName:$('#companyName').val(),
                    position:$('#position').val(),
                  },//参数取值
        })
    })