2

I trying to use a simple ajax function.Earlier the way I did is working perfeclty but today Its not working.Not working means its not even opening an alert box.Please see the code below

this is the 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>

this is the HTML part where I am calling ajax

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

This is the messageSending.jsp

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


    //sendSMS.send(number,message);

%>

Can any Body please tell me where did i do mistake?

this is my full code

<%@ 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>
4

2 回答 2

2

我不熟悉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 时它应该可以工作

于 2013-10-22T06:28:38.520 回答
1

根据您的评论，我只能推断您的表单实际上是在执行常规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; });
于 2013-10-22T09:48:30.243 回答