jsp Ajax 不工作答案

【问题标题】：jsp Ajax not workingjsp Ajax 不工作
【发布时间】：2013-10-29 22:40:09
【问题描述】：

我尝试使用一个简单的 ajax 函数。以前我所做的方式工作完美，但今天它不工作。不工作意味着它甚至没有打开警报框。请参阅下面的代码

这是javascript

<script >
       var reqObj=null;


        function send(){
            var number;
var msg;
msg=document.getElementById("body").value;
number=document.getElementById("number").value;
 alert(number);
            if(window.XMLHttpRequest){
                reqObj=new XMLHttpRequest();
            }else {
                reqObj=new ActiveXObject("Microsoft.XMLHTTP");
            }

            reqObj.onreadystatechange=sukant;
            reqObj.open("POST","./messageSending.jsp?toNumber=" + number + "&body=" + body ,true);
            reqObj.send(null);
        }
        function sukant(){
            if(reqObj.readyState==4 && request.status == 200){
                alert(reqObj.responseText);


}}
        </script>

这是我调用 ajax 的 HTML 部分

<button class="btn" type="submit" id="openAlert" onClick="send();">Send</button>

这是 messageSending.jsp

<%!String number,message; %>
<%
number=request.getParameter("toNumber");
message=request.getParameter("body");
out.println(number+"    "+message);


    //sendSMS.send(number,message);

%>

谁能告诉我我哪里做错了？

这是我的完整代码

<%@ page language="java" contentType="text/html; charset=US-ASCII" pageEncoding="US-ASCII"%>

<!DOCTYPE html>
<html>
<head>
<title>Twilio Messages (Send message Example)</title>
<meta http-equiv="Content-Type" content="text/html; charset=US-ASCII">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="http://getbootstrap.com/2.3.2/assets/css/bootstrap.css" rel="stylesheet">
<link href="http://getbootstrap.com/2.3.2/assets/css/bootstrap-responsive.css" rel="stylesheet">
<script type="text/javascript" src="https://code.jquery.com/jquery.min.js"></script>
<script type="text/javascript" src="http://getbootstrap.com/2.3.2/assets/js/bootstrap.js"></script>
<script >



        $(document).ready(function(){
        $('#openAlert').click(function(){
alert("hi");
            var number = $('#number').val(); // If its a text input could use .text()
            var msg = $('#body').val(); //If its a text input could use .text()
            $.ajax(
                {
                    type: "POST",
                    url: "messageSending.jsp", //Your full URL goes here
                    data: { toNumber: number, body: msg}
                    success: function(data, textStatus, jqXHR){
                        alert(data);                  
                    },
                    error: function(jqXHR, textStatus, errorThrown){
                        alert("error");
                    }
                });
        });
    });
        </script>

</head>
<body><span id="res"></span>
    <div class="container">
        <div class="row">
            <div class="span12">
                <h2>Twilio Messages (Send message Example)</h2>
                <form class="form-signin" action="#" method="post">
                    <div class="row">
                        <div class="span3">
                            Enter Number to send:
                        </div>
                        <div class="span3">
                            <input type="text" name="toNumber" id="number" maxlength="13" placeholder="Enter 10 digits number to send" value="+917676462182"/>
                        </div>
                        <div class="span6">
                            <div class="alert">
                                <button type="button" class="close" data-dismiss="alert">&times;</button>
                                The number to send an SMS to. This field accepts formatted and unformatted US numbers, e.g. +14155551212, (415) 555-1212 or 415-555-1212.<hr />
                                To send message from SandBox Account. The Number has to be <a href="https://www.twilio.com/user/account/phone-numbers/verified" target="_blank">verified</a>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="span3">
                            Enter Message to send:
                        </div>
                        <div class="span3">
                            <textarea name="body" maxlength="160" placeholder="Enter message to send" id="body">
                            </textarea>
                        </div>
                        <div class="span6">
                            <div class="alert">
                                <button type="button" class="close" data-dismiss="alert">&times;</button>
                                The text of the message you want to send, limited to 160 characters.
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="span3">
                        </div>
                        <div class="span9">
                            <button class="btn" type="submit" id="openAlert" >Send</button>
<input type="submit" onClick="send();"/>
                        </div>
                    </div>
                </form>
            </div>
        </div>


 <div id="le-alert" class="alert alert-warn alert-block fade">
      <button href="#" type="button" class="close">&times;</button>
      <h4>Successful</h4>
      <p>Message sent successfully</p>
    </div>
    </div>


</body>

</html>

【问题讨论】：

使用您选择的工具进行调试： 1. 您的控制台中是否出现任何错误？ 2. 直到你可以在哪里进入你的代码？ 3. 您的网络标签中显示了什么？
@Kippie 我正在使用 mozilla，我看到用红色写的东西，但它很快就消失了。它不可读，因为它突然消失了
只有当你的页面真正刷新时它才会消失。这发生了吗？如果是这样，请确保您的表单无法提交。 (
)
@Kippie 我的表单不刷新看到这个**
**

标签： javascript jquery ajax jsp

【解决方案1】：

我不熟悉jsp，但以下应该可以

jQuery ajax：

  $(document).ready(function(){
    $('#openAlert').click(function(){
            var number = $('#number').val(); // If its a text input could use .text()
            var msg = $('#body').val(); //If its a text input could use .text()
            $.ajax({
                type: "POST",
                url: "messageSending.jsp", //**Your full URL goes here**
                data: { toNumber: number, msg: msg},
                success: function(data, textStatus, jqXHR){
                    alert(data);                  
                },
                error: function(jqXHR, textStatus, errorThrown){
                    alert(errorThrown);  
                }
            });           
      });        
  });

HTML：

<button class="btn" id="openAlert">Send</button>
<input type="text" name="toNumber" id="number" maxlength="13" placeholder="Enter 10 digits number to send" value="+16822037149"/>
<input type="text" name="msg" id="body" maxlength="13"/>

不要忘记在您的页面中包含 jQuery

编辑检查此FIDDLE。它会在错误时引发异常，该异常 url 不应该，但是当您放置有效的 URL 时它应该可以工作

【讨论】：

我的输入框是这样的
对于 input type="text" 我需要做 $('#number').val();或 $('#number').text();
我不知道为什么警报不起作用。你一直保持警报成功，我也一直出错。但是没有任何警报即将到来。根本没有警报
你的回答很有帮助，所以+1

【解决方案2】：

根据您的 cmets，我只能推断您的表单实际上是在执行常规的 POST 而不是 ajax 调用，这使您很难调试问题。

使用<form class="form-signin" action="#" method="post"> 仍会发布并刷新页面，即使该操作是哈希。相反，您应该覆盖表单的 onsubmit 事件以返回 false。这可以做到

内联：<form onsubmit="return false;">
在javascript中：document.getElementById('myForm').onsubmit = function(){return false;};
或使用 jQuery：$("#myForm").on("submit", function() { return false; });

【讨论】：

感谢您的回答，在一定程度上解决了我的工作，+1