jQuery 利用$.ajax 时获取原生XMLHttpRequest 对象的方法

Posted 2023-03-22

参考技术A 废话不多说了，关键代码如下所示：
<script>
$('.screenshot_input').change(function
()
//获取file对象
即相当于可以直接post的$_FILES数据
var
domFile
=
$(this)[0].files[0]
var
domForm
=
$('#testForm')[0]
//将form对象直接作为参数
new
FormData对象
var
formData
=
new
FormData(domForm);
//追加file
对象
formData.append('file',domFile);
$.ajax(
url:'
path(
'acme_admin_app_dealAppScreenShot')
',
type:
"POST",
data:
formData,
processData:
false,
//
tell
jQuery
not
to
process
the
data
contentType:
false,
//
tell
jQuery
not
to
set
contentType
xhr:
function()
//这是关键
获取原生的xhr对象
做以前做的所有事情
var
xhr
=
jQuery.ajaxSettings.xhr();
xhr.upload.onload
=
function
()
alert('finish
downloading')

xhr.upload.onprogress
=
function
(ev)

if(ev.lengthComputable)

var
percent
=
100
*
ev.loaded/ev.total;
console.log(percent,ev)


return
xhr;
,
success:function(data)
alert(data)

)
)
</script>
Array
(
[name]
=>
cooff
[email]
=>
qq.comaa
)
Array
(
[file]
=>
Array
(
[name]
=>
yunce2.0测试.apk
[type]
=>
application/vnd.android.package-archive
[tmp_name]
=>
/tmp/php4Jxt0c
[error]
=>
0
[size]
=>
6476627
)
)
一次过把form表单
和
file
对象发送到PHP后端controller
处理起来非常方便。
以上所述是小编给大家介绍的jQuery
利用$.ajax
时获取原生XMLHttpRequest
对象，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！

利用ajax动态生成元素Jquery无法获取新创建的元素的解决方法

问题描述：

当利用ajax技术动态创建元素时，jQuery无法获取到元素

①创建元素

ajax代码：

$.ajax(
    url: /users/getdata,
    method: post,
    dataType: json,
    success: function(data) 
        let temp = ;
        console.log(data);
        // 遍历data数据
        for (var k = 0; k < data.length; k++) 
            console.log(data[k][0].author);
            temp += <div class=" row col-12 messages"><div class="col-12 messagebox left"><span class="username">;
            temp = temp + data[k][0].author + </span>;
            temp = temp + <span class="datetime"> + data[k][0].time + </span>;
            temp = temp + <span class="usericon"></span><span class="messagedelete">删除</span></div>;
            temp = temp + <div class="col-12"><span class="message"> + data[k][0].content + </span></div>;
            for (var i in data[k]) 
                if (i == 0)
                    continue;
                else 
                    console.log(data[k][i]);
                    temp = temp + <div class="col-12 feedbacmessage"><span class="feedbackName"> + data[k][i].author + </span><span feedBackMessage>:  ;
                    temp = temp + data[k][i].content + </span><span class="feedbackdelete">删除</span></div>
                
            
            temp += <div class="col-4 feedbackinput"><form action="/users/submitfeedBackMessage" method="POST">;
            temp += <textarea class="feedbackwords" name="feedbackword" id="feedbackwords" cols="60" rows="1" placeholder="我也说一句"></textarea>;
            temp += "<input type=text name=tablename value=" + data[k][0].tableName + "style=display: none;>";
            temp += <button type="submit" class="btn btn-success mr-2">提交</button><button type="reset" class="btn btn-light">重置</button>;
            temp += </form></div></div>;
        
        $(.messagecontent).html(temp);
    
);

jquery代码：

$(function() 
            $(.feedbackwords).on(focus, function() 
                console.log(up);
                $(this).css(border, 1px solid #ccc);
                $(this).attr(rows, 2);
                $(this).parent().children(button).show();
            );
            $(.feedbackwords).mouseover(function() 
                $(this).css(border, 1px solid orange);
            );
            $(.feedbackwords).blur(function() 
                $(this).css(border, 1px solid #ccc);
                $(this).attr(rows, 1);
                $(this).parent().children(button).hide();
            );
            $(.feedbackwords).mouseout(function() 
                $(this).css(border, 1px solid #ccc);
            );
            console.log($(.feedbackwords));
            console.log(down);

        );

②页面显示元素没有获取

函数没有实现

解决办法

在网上查阅资料后发现动态添加的标签要事件委托才能获取到节点
修改代码如下：

$(function() 
        $(.messagecontent).on(mouseenter, function() 
            $(.feedbackwords).on(focus, function() 
                console.log(up);
                $(this).css(border, 1px solid #ccc);
                $(this).attr(rows, 2);
                $(this).parent().children(button).show();
            );
            $(.feedbackwords).mouseover(function() 
                $(this).css(border, 1px solid orange);
            );
            $(.feedbackwords).blur(function() 
                $(this).css(border, 1px solid #ccc);
                $(this).attr(rows, 1);
                $(this).parent().children(button).hide();
            );
            $(.feedbackwords).mouseout(function() 
                $(this).css(border, 1px solid #ccc);
            );
            console.log($(.feedbackwords));
            console.log(down);
        );
    );

结果如下所示