轉換類型按鈕以使用ajax和jquery提交

Question

問題：當我單擊按鈕type =“ button”時，它顯示所有數據。 但是，如果我將其更改為type =“ submit”，則不會顯示數據。 我想要的是將此type =“ button”轉換為type =“ submit”，以顯示數據。

這是我的代碼：

<form name="chatform">
                               <div class="input-group" id="msg">
                                   <input type="text" class="form-control" name="inputmsg" placeholder="Enter message here. . ." id="inputmsg">
                                   <span class="input-group-btn">
                                      <button class="btn btn-success" type="button" name="btn-send" id="cnd" onClick="submitChat()">Send</button>
                                   </span>
                               </div>
                           </form>

ajax w / jquery

function submitChat(){
            if(chatform.inputmsg.value== ""){
                alert("fill in blanks");
                return;
              }
              var msg = chatform.inputmsg.value;
              var xhttp = new XMLHttpRequest();
              xhttp.onreadystatechange = function(){
                if(xhttp.readyState == 4 && xhttp.status==200){
                  document.getElementById("chatlogs").innerHTML = xhttp.reponseText ? xhttp.reponseText : "";
                }
              };
              xhttp.open("GET","insert.php?msg="+msg, true);
              xhttp.send();
              $(document).ready(function(){
                $.ajaxSetup({cache:false});
                setInterval(function(){
                  $("#chatlogs").load("logs.php");
                }, 2000);
              });
              document.getElementById("inputmsg").value = "";
        }

Answer 1

您需要停止提交的正常執行。 這是最終代碼：

$("#inputmsg").keypress(function(e){
    if(e.which == 13){
        e.preventDefault();
        submitChat();
    }
});

$("#cnd").click(function(e){
    e.preventDefault();
    submitChat();
});

function submitChat(){
    if(chatform.inputmsg.value== ""){
        alert("fill in blanks");
        return;
    }
    var msg = chatform.inputmsg.value;
    var xhttp = new XMLHttpRequest();
    xhttp.onreadystatechange = function(){
        if(xhttp.readyState == 4 && xhttp.status==200){
            document.getElementById("chatlogs").innerHTML = xhttp.reponseText ? xhttp.reponseText : "";
        }
    };
    xhttp.open("GET","insert.php?msg="+msg, true);
    xhttp.send();
    $(document).ready(function(){
        $.ajaxSetup({cache:false});
        setInterval(function(){
            $("#chatlogs").load("logs.php");
        }, 2000);
    });
    document.getElementById("inputmsg").value = "";
}

然后刪除html按鈕中的點擊功能：

<button class="btn btn-success" type="button" name="btn-send" id="cnd">Send</button>

這應該可以解決您的問題。