将此多数据容器脚本从jquery转换为普通JS结构 [英] Converting this multi per data container script from jquery to a plain JS structure
问题描述
我有这个脚本是我在jQuery中制作的，所以脚本的功能是每个容器都能发送值。当您按下每个发送按钮而没有任何干扰时，其他容器将值发送到x.php，这些值由x.php回显。所以我想将它转换为纯JS结构，但问题是一些
jQuery组件在JS中不存在因为jQuery是一个JS库我不是确定引擎盖下产生的是什么。所以我不确定我是如何模拟JS结构的jQuery组件到目前为止我尽力将其转换为JS但问题是我不能使用该JS页面上的其他容器执行此操作。它仅适用于第一个容器。
这是一个.gif屏幕截图链接，向您展示它在正常工作时的外观。
https://i.stack.imgur.com/kSX40.gif
这是完美的jQuery示例。
I have this script that I made in jQuery a while back so what the script does it haves the ability to send values per container. When you press each send button without any interference's from
the other containers the values are sent to x.php were those values are echoed by x.php. So I want to convert this to a pure JS structure but the problem is some
jQuery components don't exist in JS since jQuery is a JS library i'm not sure what is being generated under the hood. So I am unsure how I can simulate the
jQuery components to a JS structure so far I did my best to convert this to JS but the problem is I can't do this with other containers on that JS page. It only works on the first container.
This is a .gif screen shot link to show you guys how it looks when it works right.
https://i.stack.imgur.com/kSX40.gif
Here is the perfect jQuery example that works.
<style>
.dataContainer{
background-color: red;
width: 185px;
position: relative;
margin-bottom: 25px;
}
.dataContainerDesign .a,.b,.send{
display: block;
margin: auto;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
/*<Multi ajax forms>*/
$('.dataContainer .send').click(function(){
//Per data container
var $dataContainer = $(this).closest('.dataContainer');
//
//Var data structure
var a= $dataContainer.find('.a').val();
var b= $dataContainer.find('.b').val();
//
//Data to be sent
var Data= 'a='+a+'&b='+b;
//
//Result after sending
var Result= function(success){
$dataContainer.html(success);
}
//
//Request
$.ajax({
type: 'POST',
data: Data,
url: 'x.php',
success: Result
});
//
});
/*</Multi ajax forms>*/
});
</script>
<div class='dataContainer dataContainerDesign'>
<input class='a' type='text'>
<input class='b' type='text'>
<button class='send'>Send</button>
</div><!--</dataContainer>-->
<div class='dataContainer dataContainerDesign'>
<input class='a' type='text'>
<input class='b' type='text'>
<button class='send'>Send</button>
</div><!--</dataContainer>-->
<div class='dataContainer dataContainerDesign'>
<input class='a' type='text'>
<input class='b' type='text'>
<button class='send'>Send</button>
</div><!--</dataContainer>-->
<div class='dataContainer dataContainerDesign'>
<input class='a' type='text'>
<input class='b' type='text'>
<button class='send'>Send</button>
</div><!--</dataContainer>-->
我尝试转换这是一个普通的JS结构，它只适用于我需要它来处理其他的第一个。
My attempt to convert this to a plain JS structure it only works on the first one I need it to work on the others too.
<style>
.dataContainer{
background-color: red;
width: 185px;
position: relative;
margin-bottom: 25px;
}
.dataContainerDesign .a,.b,.send{
display: block;
margin: auto;
}
</style>
<script>
document.addEventListener('DOMContentLoaded', function(){
document.querySelector('.dataContainer .send').addEventListener('click', perContainer);
var xhr= new XMLHttpRequest();
xhr.onreadystatechange = function(){
if(xhr.readyState === 4){
document.querySelector('.dataContainer').innerHTML= xhr.responseText;
}
};
function perContainer(){
//Var structrue
var a= document.querySelector('.a').value;
var b= document.querySelector('.b').value;
//
//Data to be sent
var data = 'a='+a+'&b='+b;
//
xhr.open('POST','x');
xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhr.send(data);
}
});
</script>
<div class='dataContainer dataContainerDesign'>
<input class='a' type='text'>
<input class='b' type='text'>
<button class='send'>Send</button>
</div><!--</dataContainer>-->
<div class='dataContainer dataContainerDesign'>
<input class='a' type='text'>
<input class='b' type='text'>
<button class='send'>Send</button>
</div><!--</dataContainer>-->
<div class='dataContainer dataContainerDesign'>
<input class='a' type='text'>
<input class='b' type='text'>
<button class='send'>Send</button>
</div><!--</dataContainer>-->
<div class='dataContainer dataContainerDesign'>
<input class='a' type='text'>
<input class='b' type='text'>
<button class='send'>Send</button>
</div><!--</dataContainer>-->
这是档案这些值在AKA x.php回应
This is the file that the values get echoed at AKA x.php
<p style='display: inline-block;'>
<?php
$a= $_POST['a'];
$b= $_POST['b'];
echo 'Sent Values: ';
echo $a.','.$b;
?>
</p>
我已经在网上看了很长时间，所以我可以将它转换为纯JS结构但是我对这些教程感到困惑，所以任何代码示例都会受到赞赏，因为我学习的方式最好，而且我没有这么做。我需要关注其他代码方法的建议。我只关心产生类似jQuery的效果。
我尝试过：
我去了很多聊天网站寻求帮助，但是每个人都无法弄明白，即使是铁杆专业人士也不想尝试这个，他们说这很难做到。在我弄清楚jQuery版本之前，这就是他们所说的。所以我知道它与JS版本一样可行。因此任何所谓的专业人士可以解决这个问题，然后你的优势就比其他人好。
I have looked online for a long time so I can convert this to a pure JS structure but I am confused on those tutorials so any code examples will be appreciated because I learn best that way and I don't
care what other code methods is suggested. I just care about generating a similar effect like the jQuery one.
What I have tried:
I went to many chat sites for help but every one can't figure it out not even the hardcore pros don't want to try this they says its to hard to do. That's what they all say till I figure out the jQuery version. So I know it is possible as well with the JS version. So any so call pros that can solve this then your more Superior than the others.
推荐答案
（文件）.ready（function（）{
/ *<多个ajax表格> * /
(document).ready(function(){ /*<Multi ajax forms>*/
（'。dataContainer .send'）。click（function（）{
//每个数据container
var
('.dataContainer .send').click(function(){ //Per data container var
dataContainer =
dataContainer =
这篇关于将此多数据容器脚本从jquery转换为普通JS结构的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
![https://i.stack.imgur.com/kSX40.gif](\"https://i.stack.imgur.com/kSX40.gif\"){kind=link}