Ajax应用(prototype.js为框架)

最新推荐文章于 2018-01-04 11:20:57 发布

原创最新推荐文章于 2018-01-04 11:20:57 发布 · 837 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#ajax #function #javascript #input #html #框架

本文介绍了一个基于Prototype.js框架的Ajax应用实例。通过该应用，可以实现信息的异步加载与表单提交功能。文章提供了完整的HTML页面代码，包括JavaScript函数定义、Ajax请求设置及响应处理等。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Ajax应用(prototype.js为框架)

<html>
<head>
<Script language="javaScript" src="prototype.js"></Script>
<script type="text/javascript">
//用于信息显示
function async()
{
    new Ajax.Request('show.asp', {
        method: 'get',
        onSuccess: Success,
        onFailure: Failure
    });
}

//用于提交表单
function Send_info()
{
    new Ajax.Request('upload.asp', {
        postBody: Formdata("form1"),
        onSuccess: function Failure(){ alert("提交完成"); },
        onFailure: Failure
    });
}

//自定义的获取表单数据的函数
function Formdata(form){
    var f = document.getElementById(form), formData = '', len = f.elements.length;
    for (var s=0; s<len; s++) {
        var elem = f.elements[s];
        if((("radio"==elem.type || "checkbox"==elem.type) && false==elem.checked) || ("select-one"==elem.type && true==elem.disabled)){continue;}
        formData += elem.name+"="+escape(elem.value)+"&";
    }
    return formData;
}
//加载成功函数
function Success(xmlReq){
    document.getElementById("main_content").innerHTML = xmlReq.responseText;
};
//加载失败函数
function Failure(){
    alert("加载失败");
};
</script>
</head>
<body>
<form method="post" name="form1" id="form1">
  <input name="num" type="text" value="123"/>
  <input name="" type="button" value="提交" onclick="Send_info()"/>
</form>

<div id="main_content"> </div>
<script type="text/javascript">
async();
</script>
</body>
</html>