Question

我试图在html5中实施编辑。试图实现这个

http://w3lessons.info/2014/04/13/html5-inline-edit-with-php-mysql-jquery-ajax/

但是在烧瓶，ajax和jquery中。当我向烧瓶应用程序发送ajax请求时，它似乎无法访问我传递的数据＆＃34; dd＆＃34;标签。这是我的路线功能

@app.route('/updateNode', methods=['POST'])
def updateNode():
 fieldToEdit = request.args.get('fieldToEdit', None)
 value = request.args.get('value', None)

 app.logger.debug(value)
 app.logger.debug(fieldToEdit)
 if value == None:
    return jsonify(success=0)
 else:
    return jsonify(success=1)

使用app.logger.debug（value）

检查时始终看不到

视野中的DEBUG：无

我的Ajax代码是这样的

<script>
$(document).ready(function(){
  $("dd[contenteditable=true]").blur(function()
  {
    var field_user = $(this).attr("id") ;
    var value = $(this).html() ;
    console.log(field_user);
    console.log(value);
    $.ajax({
      type: "POST",
      url: "/updateNode",
      data: {
        'fieldToEdit' : field_user,
        'value': value
      },
      dataType: "text",
      success: function(rsp){
        console.log("Ajax call was successful" + rsp);
      },
      error: function(e) {
        console.log('request failed ' + e);
      }
    });
  });
});
</script>

在进行ajax调用之前，我可以在开发人员工具控制台中看到正确的值。

我的Html代码

<li>
  <dl>
   <dt>Age</dt>
   <dd id="editAge"contenteditable="true">40</dd>
  </dl>
</li>

runnable中的示例代码 http://code.runnable.com/me/VqbxNjRjLVNkRnxN

.html（）应该只返回值，所以我无法理解为什么request.args.get无法从数据中提供的键值对中检索值

Answer 1

出于这些目的，我不确定您是否要发送值的实际HTML，因为它将包含HTML标记。

文档。

html（）： http://api.jquery.com/html/

在HTML文档中，.html（）可用于获取任何内容元件。如果选择器表达式匹配多个元素，只有第一个匹配才会返回其HTML内容。考虑这段代码：

$( "div.demo-container" ).html();

为了检索以下内容，它会必须是第一个有class =＆＃34; demo-container＆＃34;在文件中：

<div class="demo-container">
  <div class="demo-box">Demonstration Box</div>
</div>

结果如下：

<div class="demo-box">Demonstration Box</div>

然而，正如您所看到的，HTML标记仍然存在。

您应该使用text()

文档 http://api.jquery.com/text/

与.html（）方法不同，.text（）可以在XML和HTML中使用文档。 .text（）方法的结果是一个包含的字符串所有匹配元素的组合文本。（由于HTML的变化在不同浏览器中的解析器，返回的文本可能在换行符中有所不同和其他空格。）考虑以下HTML：

<div class="demo-container">
  <div class="demo-box">Demonstration Box</div>
  <ul>
    <li>list item 1</li>
    <li>list <strong>item</strong> 2</li>
  </ul>
</div>

代码$( "div.demo-container" ).text()会产生以下结果：

演示框列表项目1列表项目2

Answer 2

我可以使用此代码来解决它

 <script type=text/javascript>
 $(function() {
  $('dd[contenteditable=true]').bind('blur', function() {
    $.getJSON('/updateNode', {
      a: $(this).attr("id"),
      b: $(this).text()
    }, function(data) {
    console.log("Ajax call was successful" + data);
   });
   return false;
  });
 });
</script>

但是，我不知道为什么它不适用于$ .ajax方法

request.args.get为ajax请求返回none

2 个答案: