Ajax提交参数时html标签提交失败如何处理

html-css023

Ajax提交参数时html标签提交失败如何处理,第1张

这种处理方法可行,把html符号过滤替换,后台接收时再替换回去。

比如需要提交的变量message,替换如下:

message=message.replace(/</g,"@左尖括号@")

message=message.replace(/>/g,"@右尖括号@")

message=message.replace(/\//g,"@左斜杠@")

message=message.replace(/=/g,"@等号@")

message=message.replace(/&/g,"@and@")

message=message.replace(/\"/g,"@双引号@")

message=message.replace(/ /g,"@空格@")

替换完毕后发送,后台接收数据时候又替换回去。测试可用。

言归正传,jquery ajax和js中用ajax提交html代码内容的方法是差不多,举个例子:

<html>

<head>

<script type="text/javascript" src="/jquery/jquery.js"></script>

<script type="text/javascript">

$(document).ready(function(){

$("#b01").click(function(){//单击按钮b01的时候触发这个事件

htmlobj=$.ajax({url:"/jquery/test1.txt",async:false}) //定义一个对象,从后台获取test1.txt文件内容

$("#myDiv").html(htmlobj.responseText) //将上面定义的对象中的内容给页面赋值

})

})

</script>

</head>

<body>

<div id="myDiv"><h2>通过 AJAX 改变文本</h2></div>

<button id="b01" type="button">改变内容</button>

</body>

</html>

语法:jQuery.ajax([settings])

上面的例子没有传参给后台,而是从后台获取,下面的是一个jquery jaxa的向后台传递的例子:

JQUERY:

$.ajax({

type:'post',//可选get

url:'action.php',//这里是接收数据的PHP程序

data:'data='dsa'',//传给PHP的数据,多个参数用&连接

dataType:'text',//服务器返回的数据类型 可选XML ,Json jsonp script html text等

success:function(msg){

//这里是ajax提交成功后,PHP程序返回的数据处理函数。msg是返回的数据,数据类型在dataType参数里定义!

},

error:function(){

ajax提交失败的处理函数!

}

})

//H5自带的验证是比较简单的验证,不完美,只适合比较简单的验证。具体使用方法如下:

//需求:用户名:不能为空,长度在6至12之间,内容为英文

//HTML

<input type="text" id="user" required minlength=6 maxlength=12 pattern="^[a-zA-Z]+$">

//js

var user = document.getElementById("user")

user.onblur = function(){

if(user.validity.valueMissing){

user.setCustomValidity("用户名为空.")

}else if(user.validity.tooShort){

user.setCustomValidity("用户名过短.")

}else if(user.validity.tooLong){

user.setCustomValidity("用户名过长.")

}else if(user.validity.patternMismatch){

user.setCustomValidity("用户名输入错误.")

}

}

//required属性:验证是否为空

//pattern属性 :匹配正则

//validity属性:是H5底层的逻辑提供,原本已经存在的。元素通过elem.validity获得validityState对象

//例如可以获得的对象有:valueMissing 验证是否为空 返回true或false

//再例如:patternMismatch 验证是否匹配正则 同样返回 true或false

怎么使用ajax提交?

你可以将我上面的代码封装成一个check方法,用来检查表单内容是否正确,在用户点击提交按钮的时候不是直接submit表单,而是触发一个表单提交前验证方法check,验证通过后,将表单中的元素获取到,保存在一个变量中下面以jquery的ajax为例:

var jsonData={'userName':user.value}

$.ajax({

url:'接口地址',

type:'post',

dataType:'json',

data:jsonData,

success:function(data){

//发送成功后的回调,data包含成功时后台返回的数据

},

error:function(res){

//发送失败时的回调,res包含失败时的后台返回的数据

}

})

//特别要注意一点的是如果要用ajax发送数据,就不要将提交按钮的type设置为submit,否则form还是会自动提交