JQ+ajax 提交表单不跳转页面

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/qq_35713752/article/details/83073422

代码

		<div class="apply_box">
			<h1>合作申请</h1>
			<div class="apply_l">
				<input type="text" maxlength="20" id="name" name="name" placeholder="您的姓名">
				<input type="number" maxlength="14" id="phone" name="phone" placeholder="您的电话">
				<input type="text" id="company" name="company" placeholder="您的公司">
			</div>
			<div class="apply_r">
				<textarea name="detail" id="detail" cols="30" rows="10" placeholder="需要咨询的合作"></textarea>
				<input type="submit" id="sub" value="提交申请">
			</div>
			<script type="text/javascript">
				$('#sub').click(function() {
					var aa = $("#detail").val();
					console.log(aa)
					$.post("https:/xxx.cn/api/xxx.do", {
							name: $("#name").val(),
							phone: $("#phone").val(),
							company: $("#company").val(),
							page: 'index',
							detail: aa,
						},
						function(data) {
							alert("Data: " + data);
						});
				});
			</script>
		</div>

注意：JQ获取textarea的值的时候，在post里面无法通过$("#detail").val()获取到值，需要在事件创建一个变量获取它；

实现：post提交表单通过JQ的AJAX提交，达到不刷新，不跳转页面的效果