点击发送数据 - jquery ajax chat答案

【问题标题】：send data on click - jquery ajax chat点击发送数据 - jquery ajax chat
【发布时间】：2011-04-10 12:07:25
【问题描述】：

我和脚本有一个 jquery 聊天

var name = "Guest";
    name = name.replace(/(<([^>]+)>)/ig,"");
    var chat =  new Chat();
    $(function() {
         chat.getState();
         $("#sendie").keydown(function(event) {
             var key = event.which;
             if (key >= 33) {
                 var maxLength = $(this).attr("maxlength");
                 var length = this.value.length;
                 if (length >= maxLength) {
                     event.preventDefault();
                 }
              }
              });
         $('#sendie').keyup(function(e) {
              if (e.keyCode == 13) {
                var text = $(this).val();
                var maxLength = $(this).attr("maxlength");
                var length = text.length;
                if (length <= maxLength + 1) {
                    chat.send("testtext", name);
                    $(this).val("");
                } else {
                    $(this).val(text.substring(0, maxLength));
                }
              }
         });
    });

html结构是；

<body onload="setInterval('chat.update()', 1000)">

    <div id="page-wrap">

        <h2>jQuery/PHP Chat</h2>

        <p id="name-area"></p>

        <div id="chat-wrap"><div id="chat-area"></div></div>

        <form id="send-message-area">
            <p>Your message: </p>
            <textarea id="sendie" maxlength = '100' ></textarea>
            <button id="submit">submit</button>
        </form>

    </div>

</body>

当我在消息后按ENTER 键时，此消息会发送（或保存到文件）。我已将文本区域数据替换为 testtext。当我点击submit 按钮时，我想发送数据。

我该怎么做？？

我正在尝试修改 this 示例。如果有人有解决方案，请告诉我。我正在尝试添加一个按钮而不是默认的enter 按键。

提前谢谢...:)

爆破

【问题讨论】：

如果我把<button id="submit">submit</button> 放在外面有什么办法吗？？

标签： javascript jquery-plugins jquery livechat

【解决方案1】：

使用 jQuery 的 ajax() 或 post()。例如：

$('#submit').click(function() {
    $.ajax({
      url: myUrl,
      cache: false,
      dataType: "json", 
      data: { 'message' : $('#sendie').val() }, 
      success: function(data){
        //...
      },
      error: function(e, xhr){
        //...
      }
    });
});

【讨论】：

是的，有可能吗？是的。我会为你做吗？如果你付钱给我……想办法。

【解决方案2】：

只需从$('#sendie').keyup() 获取代码，创建一个函数并从$('#sendie').keyup() 和$('#send-message-area').submit() 调用它

类似的东西

var name = "Guest";
name = name.replace(/(<([^>]+)>)/ig,"");
var chat =  new Chat();
$(function() {
     chat.getState();
     $("#sendie").keydown(function(event) {
         var key = event.which;
         if (key >= 33) {
             var maxLength = $(this).attr("maxlength");
             var length = this.value.length;
             if (length >= maxLength) {
                 event.preventDefault();
             }
          }
          });
     $('#sendie').keyup(function(e) {
          if (e.keyCode == 13) {
             doSend();
             return (false);
          }
     });
     $('#send-message-area').submit(function(e) {
        doSend();
        return (false);
    });
});

function doSend(){
    var text = $('#sendie').val();
    var maxLength = $('#sendie').attr("maxlength");
    var length = text.length;
    if (length <= maxLength + 1) {
        chat.send("testtext", name);
        $('#sendie').val("");
    } else {
        $('#sendie').val(text.substring(0, maxLength));
    }
}

【讨论】：

【解决方案3】：

您可以在提交表单时尝试触发事件：

$('#sendie').keyup(function(e, extra) {
    if (e.keyCode == 13 || extra.keyCode == 13) {
        var text = $(this).val();
        var maxLength = $(this).attr("maxlength");
        var length = text.length;
        if (length <= maxLength + 1) {
            chat.send("testtext", name);
            $(this).val("");
        } else {
            $(this).val(text.substring(0, maxLength));
        }
    }
 });

...

$("#send-message-area").submit(){
    $('#sendie').trigger('keyup', [{keyCode: 13}]);
    return false;
}

需要return false 行以防止重新加载您的页面。

更新后为keyup函数添加了一个名为extra的新参数，它将保存“手动”触发的事件的keyCode。

【讨论】：

这只有在您也可以传递密钥代码 13 时才有效（也许您可以？），以确保触发所需的代码。
再次......不确定这是否会起作用，因为函数期待一个事件，而不是一个名为 keyCode 的变量。你能完成这项工作吗？ jsfiddle.net/kV7qL/1
@Dutchie432 我虽然trigger 函数的第二个参数会覆盖引发事件的第一个参数，但它不会。事件始终是第一个参数。

【解决方案4】：

我通过从主组中删除chat send 并将其包含在trigger click function 中来解决它，如下所示；

$('#trigger').click(function() {
    chat.send("testtext", name);
    $(this).val("");
    });

感谢@Kon、@Piotr Salaciak 和@Dutchie432 的支持... :)

【讨论】：