ajax的一种框架prototype_xaxtobo-优快云博客

本文介绍了Prototype JavaScript库中$()和$F()方法的使用示例，展示了如何选取DOM元素及获取表单输入值，并通过Ajax进行数据请求。

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

$()标签,$F()标签
<HTML>
<HEAD>
<TITLE> Test Page </TITLE>
<script src="./js/prototype.js"></script>

<script>
    function test1()
    {
        var d = $('myDiv');
        alert(d.innerHTML);
    }

    function test2()
    {
        var divs = $('myDiv','myOtherDiv');
        for(i=0; i<divs.length; i++)
        {
            alert(divs[i].innerHTML);
        }
    }

    function test3(obj)
    {
        var d=$F('t1');
        alert(d);

    }
</script>
</HEAD>

<BODY>
    <div id="myDiv">
        <p>This is a paragraph</p>
    </div>

    <div id="myOtherDiv">
        <p>This is another paragraph</p>
    </div>

    <input type="text" name="c1" id="t1" value=""><br>

    <input type="button" value=Test1 onclick="test1();"><br>
    <input type="button" value=Test2 onclick="test2();"><br>
    <input type="button" value=Test3 onclick="test3();">
</BODY>
</HTML>

ajax.request

<HTML>
<HEAD>
<TITLE> Test Page </TITLE>
<script src="./js/prototype.js"></script>

<script>
    function searchSales()
    {
        var empID = $F('lstEmployees');
        var y = $F('lstYears');
        var url = 'http://localhost:80/js/login.do';
        var pars = 'empID=' + empID + '&year=' + y;
       var myAjax = new Ajax.Request(url,{method: 'get', parameters: pars, onComplete: showResponse});
    }

    function showResponse(originalRequest)
    {
        //put returned XML in the textarea
        $('result').value = originalRequest.responseText;
    }
</script>

<select id="lstEmployees" size="10" onchange="searchSales()">
    <option value="5">Buchanan, Steven</option>
    <option value="8">Callahan, Laura</option>
    <option value="1">Davolio, Nancy</option>
</select>
<select id="lstYears" size="3" onchange="searchSales()">
    <option selected="selected" value="1996">1996</option>
    <option value="1997">1997</option>
    <option value="1998">1998</option>
</select>
<br><textarea id=result cols=60 rows=10 ></textarea>