Solution:
To use AJAX in WordPress plugins
jQuery('#submit').submit(function(event){
event.preventDefault();
var img = jQuery('#img').val();
var backimage = jQuery('#back_img').val();
var url = jQuery('#url').val();
var data = {
action: 'submit_data',
img: img,
back_img: backimage,
url : url,
};
if(img!=''&backimage!=''){
jQuery.ajax({
type: "POST",
url: ajaxurl, // if its front end else use else ajaxurl
data:data,
dataType: 'html',
success: function( response ) {
alert(response+'sdfs')
jQuery('#error').html( response );
jQuery('#mng_img').append('<div class="col-md-4"><img src="'+img+'"width="100%"/></div><div class="col-md-2"><a href="<?php $_SERVER['PHP_SELF']; ?>"><button class="btn btn-primary delete" id="delete">Upload</button></a></div>'); //delete = delete + 1;
jQuery('#img').val(''); jQuery('#back_img').val(''); jQuery('#url').val('');
},
error : function(data){
alert('Error while deleting.');
return false;
}
});
}
else{ alert('Please Enter The Frent Image and Back Images Urls: '); }
});
and in the PHP side,
add_action( 'wp_ajax_my_action', 'submit_data' ); // excutes for users that are logged in.
add_action( 'wp_ajax_nopriv_submit_data', 'submit_data' ); //executes for users that are not logged in.
function submit_data(){
global $wpdb;
$table ='wp_mnggallery';
if(isset($_POST['img'])){
$img = $_POST['img'];
$back_image = $_POST['back_img'];
$url = $_POST['url'];
$data = array(
'id' => "",
'images' => "$img",
'back_image' => "$back_image",
'url'=>"$url"
);
$number_images = count($img);
//Inserting the data
$q = $wpdb->insert($table ,$data);
echo $img.' is updated succefully <br>';
wp_die();
}
}
The url should be url: admin_url( 'admin-ajax.php' )
, if its front end else use ajaxurl
it will automatically include the necessary files