个人中心
gpt4 book ai didi

javascript - 如何使用ajax从div id中提取数据？

转载 作者：行者123 更新时间：2023-11-28 04:18:59 25 4
gpt4 key购买 nike

<分区>

我正在尝试弄清楚如何做到这一点，但我没有头绪。我需要使用 ajax 从 div 获取文本，然后使用 php 通过 SMTP 发送它，但我相信我只需要知道如何制作 ajax 部分。

假设我有这个:

<div id="trajeto-texto1">
     <span id="resultado">
         <div class="calculo"><label>Distância: 0.00 Km</label></div>
         <div class="calculo"><label>Duração: 0 min.</label></div>
         <div class="calculo"><label>Custo: R$ 0,00</label></div>
     </span>                    
</div>

我需要解析 div id“trajeto-texto”或 span id“resultado”内的每个文本。

这就像一个 php 回显，但在 javascript 中。

控制台调试，貌似跟form没有关系:

Failed to load resource: the server responded with a status of 404 (Not Found)
main.js:61 Uncaught TypeError: undefined is not a function
main.js:60 You have included the Google Maps API multiple times on this page. This may cause unexpected errors.
33209.html:9 Uncaught ReferenceError: J is not defined
VM7253:10 Uncaught TypeError: Cannot set property 'geometry' of undefined
dados-do-formulario.js:100 Uncaught SyntaxError: Unexpected token :
http://sitesdemo.mghospedagem.com/ivam-entregas/3/images/bg.png Failed to load resource: the server responded with a status of 404 (Not Found)
33209.html:1 Uncaught ReferenceError: J is not defined
33209.html:9 Uncaught ReferenceError: J is not defined
33209.html:3 Uncaught ReferenceError: J is not defined
33209.html:6 Uncaught ReferenceError: J is not defined
http://sitesdemo.mghospedagem.com/ivam-entregas/3/33209/css Failed to load resource: the server responded with a status of 404 (Not Found)

更新

好吧，所以我决定试一试，仍然没有成功:

 $(document).ready( function(){ //Quando documento estiver pronto
    $('#btnEnviar').click( function(){ /* Quando clicar em #btn */
        /* Coletando dados */
        var nome  = $('#nome').val(); 
        var email = $('#email').val(); 

var distance = $("#distance").text();
var duration = $("#duration").text();
var costs = $("#costs").text();         


        var msg   = $('#txtDetalhes').val();                                            
        var end1 = $('#1').val(); 
        var end2 = $('#txtEnderecoChegada').val(); 



        if(nome.length <= 3){           
            alert('Informe o seu nome');                        
            return false;           
        }    
        if(email.length <= 3){           
            alert('Informe o seu email');                        
            return false;           
        }  


        if(end1.length <= 3){           
            alert('Informe o endereço de partida');                        
            return false;           
        }                         
        if(end2.length <= 5){           
            alert('Informe o endereço de chegada');                        
            return false;           
        }      
        if(msg.length <= 5){           
            alert('Informe os detalhes');                    
            return false;           
        }                     





        /* construindo url */

/*

var urlData = "&nome=" + nome + "&email=" + email +  "&end2=" + end2 + "&distance=" + distance + "&duration=" + duration + "&costs=" + costs + "&msg=" + msg + "&end1=" + end1;

*/








 // extract all the values

    var data = [];
    $('#resultado span').each(function (index, item) {
        var id = $(item).attr('id');
        data[id] = $(item).text();
    });

    // do we have all the values?
    console.log(data);

    // POST the values to backend.php (adjust the URL).
    $.ajax({
        type: "POST",
        url: "sendmailivam.php",
        data: data,
        success: function (response) {
            console.log(response);
        }
    });
});




var urlData = { 
    "nome": nome,
    "email": email,
    "distance": distance,
    "duration": duration,
    "costs": costs,
   "msg": msg,
    "end1": end1,
    "end2": end2
};


        // Ajax 


        $.ajax({
             type: "POST",
             url: "sendmailivam.php", // endereço do phpmailer
             async: true,
             data: urlData, // informa Url
             success: function(data) { // sucesso 
                 $('#retornoHTML').html(data);
             },
             beforeSend: function() { // antes de enviar 
                 $('.loading').fadeIn('fast'); 
             },
             complete: function(){ // completo 
                 $('.loading').fadeOut('fast');
             }
         });




    });    
});

再次尝试，我相信我现在没有遗漏任何一点，我怀疑问题是:数据是空的。看看我是怎么做的:

$(document).ready(function() { //Quando documento estiver pronto
     $('#btnEnviar').click(function() { /* Quando clicar em #btn */
         /* Coletando dados */
         var nome = $('#nome').val();
         var email = $('#email').val();



         /*
                  var distance = $("#distance").text();
                  var duration = $("#duration").text();
                  var costs = $("#costs").text();
                 */


         // extract all the values

         var data = [];
         $('#resultado span').each(function(index, item) {
             var id = $(item).attr('id');
             data[id] = $(item).text();
         });

         // do we have all the values?
         console.log(data);



         var msg = $('#txtDetalhes').val();
         var end1 = $('#1').val();
         var end2 = $('#txtEnderecoChegada').val();



         if (nome.length <= 3) {
             alert('Informe o seu nome');
             return false;
         }
         if (email.length <= 3) {
             alert('Informe o seu email');
             return false;
         }


         if (end1.length <= 3) {
             alert('Informe o endereço de partida');
             return false;
         }
         if (end2.length <= 5) {
             alert('Informe o endereço de chegada');
             return false;
         }
         if (msg.length <= 5) {
             alert('Informe os detalhes');
             return false;
         }

         //Construindo URL
         var urlData = {
             "nome": nome,
             "email": email,
             "data": data,
             "msg": msg,
             "end1": end1,
             "end2": end2
         };


         /*
            var urlData = {
                      "nome": nome,
                      "email": email,
                      "distance": distance,
                      "duration": duration,
                      "costs": costs,
                      "msg": msg,
                      "end1": end1,
                      "end2": end2
                  };

         */



         // Ajax 

         $.ajax({
             type: "POST",
             url: "sendmailivam.php", // endereço do phpmailer
             async: true,
             data: urlData,


             // informa Url
             success: function(data) { // sucesso 
                 $('#retornoHTML').html(data);
             },
             beforeSend: function() { // antes de enviar 
                 $('.loading').fadeIn('fast');
             },
             complete: function() { // completo 
                 $('.loading').fadeOut('fast');
             }
         });




         // do we have all the values?
         console.log(data);




     });
 });

25 4 0
文章推荐： c++ - FreeType - Texture Atlas - 为什么我的文本呈现为四边形？
文章推荐： javascript - 如何通过 Ajax 和 Javascript 加载 ruby​​ 变量？
文章推荐： c++ - COM 客户端连接 COM 服务器(进程外场景)所需的文件是什么？
文章推荐： c++ - 用C++读取文本文件读入特定关键字后面的值
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com