如何使用 jQuery Ajax 发送带有文本的表情符号？

Question

我要求用户可以同时输入 Emjois 和文本。我想将此带有表情符号的文本传递到服务器（通过 Ajax 后调用）并保存在数据库（sql 服务器）中。我们也在为原生移动（安卓、iOS）应用程序使用相同的应用程序，因此它也应该处理原生应用程序表情符号。

请您帮忙并提出您的建议吗？

User entered as: **Hello this is sample text ? ! @ # $ ????✌????‍????**

当前代码：

var memo = $('#txtMemo').val();
var recipientFName = $('#recipientFirstName').val();

$.ajax({
        type: "POST",
        url: "/Mobile//Send",
        dataType: "json",
        data: {
            'recipientFirstName': recipientFName,
            'memo': memo ,
        },
        success: function (response) {
        },
        error: function () {
        }
    });

Answer 1

有趣的问题。我在下面创建了一些与 jQuery 文档 (dom) 相关的测试...

• .on('click', '[name="html"]' 获取此按钮 dom html
• .on('click', '[name="data"]'获取此按钮[data-emojis]值
• .on('click', '[name="variable"]'使用js let result变量值
• .on('click', '[name="json"]' 运行 jQuery json ajax 并获得响应
• .on('submit', 'FORM'获取输入[name="emojis"]值

上面的测试也返回结果/响应 $result div 作为 html，以及 console.log() 结果。

我似乎在这些测试中找不到问题。请参阅下面的测试代码...

// constant result div for button on click results
const $result = $('#result');

// button name html on click function
$(document).on('click', '[name="html"]', function() {

  // get emojis html from button child span
  let result = $(this).find('SPAN').html();

  // log result
  console.clear();
  console.log(result);

  // render result html
  $result.html(result);

});

// button name data on click function
$(document).on('click', '[name="data"]', function() {

  // get emojis from button data attribute emojis
  let result = $(this).data('emojis');

  // log result
  console.clear();
  console.log(result);

  // render result html
  $result.html(result);

});

// button name variable on click function
$(document).on('click', '[name="variable"]', function() {

  // js variable with emojis
  let result = '??✌';

  // log result
  console.clear();
  console.log(result);

  // render result html
  $result.html(result);

});

// button name json on click function
$(document).on('click', '[name="json"]', function() {

  // jquery ajax call
  $.ajax({

    // get json file with emojis 
    url: 'https://api.jsonbin.io/b/5fb3211d5be6ec73e94f6285',
    type: 'GET',
    dataType: 'json',

    // on success response function
    success: function(response) {

      // json response with emojis
      let result = response[0].emojis;

      // log result
      console.clear();
      console.log(result);

      // render result html
      $result.html(result);


    },

    // on fail response function
    error: function() {

      // console err
      console.log("json emoji error");

    },


  });


});

// form test on submit function
$(document).on('submit', 'FORM', function(e) {

  // prevent form submit default
  e.preventDefault();

  // this form input with name emojis
  let result = $('[name="emojis"]',this).val();

  // log result
  console.clear();
  console.log(result);

  // render result html
  $result.html(result);

});

BUTTON {
  display: block;
  text-align: center;
  width: 100%;
  margin-bottom: 20px;
}

FORM {
  display: block;
  overflow: hidden;
}

INPUT {
  display: block;
  text-align: center;
  margin-bottom: 10px;
  width: 100%;
  min-height: 28px;
}

#result {
  padding: 1rem;
  border: 1px solid black;
  text-align: center;
  font-size: 4rem;
  border-radius: 3px;
  position: fixed;
  width: calc(50% - 30px);
}

.row {
  margin-left: -10px;
  margin-right: -10px;
}

.col {
  width: 50%;
  padding-left: 10px;
  padding-right: 10px;
  float: left;
}

BODY {
  margin: 0;
  padding: 20px;
  height: 1000px;
}

*, ::after, ::before {
    box-sizing: border-box;
}

<div class="row">
  <div class="col">

    <button name="html">
      Click for html result <span>?✌?</span> 
    </button>

    <button name="data" data-emojis="✌??">
      Click for data-emoji result ✌??
    </button>
    
    <button name="variable">
      Click js var value result ??✌
    </button>

    <button name="json">
      Click json ajax response ✌?➕❤️
    </button>
    
    <form>
      <input type="text" name="emojis" value="???" />
      <button>
        Submit emojis form above ???
      </button>
    </form>  

  </div>
  <div class="col">
  
    <div id="result"></div>
    
  </div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

这是我在最后一次点击测试中使用的带有表情符号的远程 json 文件。https://api.jsonbin.io/b/5fb3211d5be6ec73e94f6285

我使用的是 Mac，所以不确定这些结果如何在其他操作系统浏览器上返回。上面这些 jQuery 浏览器测试在 chrome 中为我返回 OK ??

这也是上述测试的一个小插曲...https://jsfiddle.net/joshmoto/dLao23yq/